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> The definitive guide to Dreamweaver ° PC & Mac 
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Master the power of the 
_,., ultimate Web design tool 
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Two brains are better than one. 


Announcing the new dual-processor Power Mac G4. With its built-in 
Velocity Engine, a single G4 processor can reach supercomputer speeds of over 
three billion calculations per second (three gigaflops) — outperforming even the 
==q fastest Pentium III.” Now, with a pair of G4 processors 
combining their power to attain speeds of over seven 
) gigaflops, the new Power Mac G4 can cut through a 
common suite of Photoshop tests twice as fast as a 1GHz Pentium III-based PC. 
A level of performance that will definitely double your pleasure and double your 
fun. To find out how the dual-processor Power Mac G4 can accelerate the work 
you do every day, visit us at www.apple.com/uk or call 0800-783-4846. 


Z 


Think different. 


“In CPU and Photoshop tests. ©2000 Apple Computer, Inc. All rights reserved. Apple and the Apple logo are trademarks of Apple Computer, Inc., registered in the US 
and other countries. Power Mac, Think different and Velocity Engine are trademarks of Apple Computer, Inc. Pentium is a registered trademark of Intel Corp. 
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Bookmark this page and check in 
Yeguiarly for links to all the best 

jews, updates and tutorials on the 4 
Site relating to the Macromedia ila 

Flash format. And keep your eye 
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Tutorial: Behaviours 


. Extensions Guide 


Subscription hotline: {t]01458 271 108 
Customer services on [t} 01225 822 510 


fe] support@futurenet.co.uk 
ft] 01225 822 743 and ask for 
Exposure CD technical support 


[t] 01225 44 22 44 
a= Gary Bell advertising manager 
fe] gary.beli@futurenet.co.uk 
[t] 01225 44 22 44 
Next . fe] ca.mail@futurenet.couk 


Tutorial: E-commerce 


the branding issue 


FOR ALL PROFESSIONAL 
WEBSITE DESIGNERS 


Making a great website is about keeping abreast 
of the best ideas. That's why every month, 
Cre@teOnline uncovers the most innovative and 
imaginative sites on the Web, exploring what 
makes them special and who put them together. 
We also talk to the luminaries taking this 
industry forward, and reveal all you need to 
know to stay one step ahead of the game. 


IN ISSUE FOUR: 


HOW TO GET AHEAD IN BRANDING 

We talk to the best in the business to find out what makes a 
great brand and how brands need to be represented online if 
they are to be a success. Plus, we explore the many different 
ways agencies try to get under the skin of a brand, and take a 
look at ten online brands to assess their success. And, to give 
you an insight into the branding process, we put the creators 
of Blackserve, a new black website, in front of four branding 
experts and look at how they interpret the Blackserve brand 
and what they would do online. 


PLUS: We give the new Flash 5 to four designers to see 
whether they think it's worth upgrading. 

We put Ericsson in a room full of designers to talk about 3G 
and what it means to anyone planning to design for it. 
Channel 4’s Big Brother website is an Internet phenomenon. 
We take a look at how it was done and the problems 
encountered along the way. 

3D is set to change the way we use the Net and every 
company worth its salt is working on 3D technology. We 
report on some of the latest announcements. 

Three designers take a look at Freeserve and talk about how 
they would make it better. 


CD AND MAGAZINE: £5 


ON SALE NOW 


Promotional feature 
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Netscape Online 


THE FREE INTERNET SERVICE IN 
ASSOCIATION WITH FUTURE PUBLISHING 


WHAT WORKS 


Click on the columa name to sort 
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computer § 
Create stylish pages, maintain your The essential tool for downloading i ¢ E i a | 
< 


Website, and create a stunning and integrating useful plug-ins with pe Cc 
online presence with Dreamweaverand UltraDev The definitive guide to art, design and technology 
Macromedia's premier Web 

design package. 30 day trial ae i 


A selection of indispensable plug- 
ins to make your life easier 

it's Dreamweaver Extra — all the 

functionality of Web design, plus 

extensive features for integrating 

with databases. 30 day trial The coverdisc contains everything 
you need to complete our tutorials 
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Create, optimise and tweak your 
Web graphics to perfection. The 
perfect companion to 
Dreamweaver. 30 day trial 
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Adobe's patented tabs 
(top, seen here in 
Photoshop) and 
Macromedia’s equivalent 
(above, from Flash 5), 
which Adobe says 
infringes on its patent. 
This one could run and 
run and run... 
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Adobe vs Macromedia 


Adobe sues Macromedia. Macromedia says it’s innocent. 


The Web just got serious. 


he ‘war’ between Adobe and 
Macromedia, always fierce 
competitors but even more so now 
| that both companies want to own 
the Web, is hotting up. Adobe has filed a suit 
against Macromedia for infringement of a US 
patent — no. 5,546,528, to be precise. This 
patent covers Adobe's tabbed palettes, such 
as those found in Photoshop and many other 
applications, which enable you to organise 
and customise user interface functions. 
According to the Website at 
www.adobefacts.com, Adobe claims that the 
palettes are “being copied by Macromedia in 
many of its products, including Flash 5, 
Dreamweaver, FreeHand and Fireworks 
software,” and has requested that 
Macromedia “remove the feature in its 
products that infringes on Adobe’s patent.” 
Adobe says it is taking this action now after 
first contacting Macromedia in 1996 and 


Log on and learn 


several times after. It claims that Macromedia 
failed to comply with their request, and has 
since introduced a new product-wide 
initiative which includes the patented 
palettes in profusion. 

Responding to the obvious charge that 
Adobe is doing this simply because 
Macromedia is its fiercest competitor, Adobe 
says that “competition has to be based ona 
level playing field and with respect for each 
other's intellectual property.” It's also keeping 
tight-lipped about any further possible suits 
against other companies who may, according 
to Adobe, infringe the patent. 

Macromedia has responded in kind by 
categorically denying the claims. Ina 
statement on its Website the company says it 
believes the patent to be “invalid and 
unenforceable” and that “Macromedia does 
not violate the patent.” It also says that it 
advised Adobe of this on each occasion it was 


contacted. 

Such legal shenanigans are not uncommon 
in the world of big-business software and 
hardware, particularly the famous ‘look and 
feel’ case brought by Apple against Microsoft 
some years ago (which Microsoft won). 
However, this is a patent rather than a 
copyright case and should, in theory, be 
easier to prove one way or the other. 

Cases such as these can often drag on for 
years and in this instance, even if Adobe 
should win, it’s probable the results will be 
negligible to Macromedia, which is likely to 
find a similar way to achieve the same ends in 
its own software. It’s too early to say if 
Macromedia will respond with a counter- 
claim, which is also quite common in 
litigation cases. 
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Don't waste your time surfing, get online and do something useful... 


acromedia, in conjunction with a training 

company called Element K, has 

launched Macromedia University as an 
online training source for most of its packages. The 
University provides a way to learn titles remotely 
and at your own pace, 

The courses are sold as an annual subscription 
and cover three skill levels: Basic, Complete and 
Web Professional. Each course includes 8-12 hours 
of content, created with Director 8 and delivered as 
a Shockwave movie. Basic and Complete levels 
work much as you'd expect, while the Professional 
level includes just about everything from Java and 
Linux to HTML and database programming. 

Macromedia University also provides pre- and 


post-course assessments to test acquired 


knowledge and provide a customised study plan. 
There's also the chance to take part in online chat 
sessions and ‘lectures’ with experts. 

Macromedia itself will provide subject matter 
experts and contribute to the courses, while 
Element K will actually create the content and tests. 

Courses at the Basic level cost $99 a year, $249 
for Complete and $399 for Professional. Courses in 
Dreamweaver 3, UltraDev, Fireworks 3, Director 8, 
Flash 4 and Generator 2 are already available, 
closely followed by Flash 5, Authorware 5 and 
FreeHand 9. See page 49 for the chance to wina 


course of your choice... 


Of course Computer Arts and the Specials are your 
best source for learning about graphics applications, 
but Macromedia thought it would have a go with its 
new online University as well... 


Flash 5 


The latest version is here — and there’s a whole Computer Arts Special on the way... 


y the time you read this Flash 5 will the transition for more experienced Web 
finally be on the shelves. coders. There’s now a debugger too, to make 
Macromedia’s eagerly-awaited tracking down and fixing problems simpler. 
If you're into Flash — and as a Web 
designer, you should be — make sure you 
standard interface a la FreeHand and other don't miss the next Computer Arts Special, 
packages, including customisable shortcuts which is entirely devoted to Flash and 
and a Launcher bar. FreeHand import is also Director. 
now possible, along with Fireworks PNG We'll have extensive tutorials on making 
format import. the most of Flash 5’s new features, hints and 
Perhaps the most important new feature is tips straight from the developers, new ways to 
the addition of Bezier curve drawing tools, make the most of the format, resources, 
enabling the easy creation of precise shapes profiles and more. 
and other symbols. Oh, and hopefully there will also be 
Shared symbol libraries are also now something else very special indeed which we 
possible, so teams can easily update and can't talk about just yet... 
access assets without too much hassle and 
confusion. 
ActionScript, Flash’s scripting language, 


has been updated and ‘s now functionally gays Flash 5-f you're serious about the Web you can't afford to ignore it. Watch out for the 
equivalent to JavaScript, which should ease : Si next Computer Arts Special, entirely dedicated to this groundbreaking format. 


www.computerarts.co.uk 
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Tutorials aig  SOmMpetitions Galleries 
_ = =e 
Get downloads for tutorials, and New tips daily, resources and Enter exclusive Web competitions | Submit your work to our online 
extra material, for the guides, plus comprehensive and check out the latest news as Galleries section, or just browse 
Dreamweaver Special tutorials for Dreamweaver and it’s happening for inspiration 


many other packages 
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Dynamic UltraDev 


Ultra-what? Let's find out by creating your first dynamic Website 
using Macromedia's new tool, Dreamweaver UltraDev 


i f you’re thinking that 
{ f Dreamweaver UltraDevis 
{i just a ‘pro’ version of 

\ Dreamweaver, you'd be 
slightly wide of the mark. It is true that 
UltraDev does include all the 
functionality of Dreamweaver, but that’s 
purely a convenience to avoid needing 
to use two applications for one job. 

UltraDevs real purpose is making 

dynamic pages and sites using Active 
Server Page technology. Database- 


driven Websites are nothing new; what 
UltraDev brings to the party is a means 
of making them quickly, and without a 
degree in Visual Basic programming. In 
this tutorial we generate a fictional news 
site entitled JournoXtreme, and in the 
process demonstrate many dynamic 
Website generation techniques. 

This is fairly advanced for an 
introductory tutorial and you will need 
a good working knowledge of 
databases to get the most from it. 


bog 30-day trial on disc 

SZ) Afully working 30-day tial version of 
UltraDev can be found on your : 
coverdisc in the pesoft>featured folder. 
Expertise supplied by Mark Pickavance. 
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Part 1: Setting up 


To do this type of work you need three things: U/traDev, a database 
and a Web server that can process Active Server Pages 


Framing a solution 


One annoyance is that we needed 
to use frames for JournoExtreme. 
This would not have been 
necessary if it was possible to 
use a dynamic file include to 
change a single page in parts. 
Unfortunately this will not work 
because includes are processed 
before ASPs, and so the filename 
of the required page would not be 
resolved. One sneaky way around 
this is to take the entire HTML 
code from a page you wish to 
include and paste it into a memo 
field in a table. While you need to 
repeat this process for any 
changes, it does work very well. 
groundwork is needed. In our example using 
Windows 98 and Personal Web Server we need to 
make a directory and then publish this as a Website. 
Our site in U/traDev is called JournoXtreme. 


For Journalists being Extreme... 


Glick logo to Enter 


Opening default.htm we create a simple 

three-row table. In the top cell we place a 
prepared logo graphic, middle a byline and in the 
bottom a message to explain how to proceed. Create 
a link to index.asp and set the target to ‘_blank’. 


Using Access we make a blank database in 

a ‘DB’ sub folder. Now for the linkage we 
can use in U/traDev. In Control Panel you should 
find ODBC Datasources. Select System DSN and 
add ‘dbjournoXtreme,' selecting the database 
we just made. 
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1] Before creating anything with U/traDev some 


us ssl 

After launching UltraDev the Site options 
enable the defining of a new site using the 

target directory. Visiting App Server Info, set the 


Server Model to ASP 2.0 and Live Data URL prefix 


to http://localhost/JournoXtreme. 


li i 


In index.asp we add a frame layout for 

TopLeft. This gives us a typical site layout. 
From here we save each of the three pages as 
banner.htm, sidebar.asp and page1.htm 
respectively. The Flash logo was then added to 
the banner element. 


In Access we create two tables. One called 

tblSideBar and the other tb!Content. The 
tblSideBar table contains an autonumber field plus 
text fields to represent a text label, a link, font, size 
and colour — all are datatype ‘text’. 


In the Site panel two files can be made by 

right-clicking. We need two, one called 
default.htm and the other called index.asp. The 
htm file is there because search engines can be a 
bit picky about registering dynamic pages. 
Default. htm links on to index.asp. 


6 | This is Microsoft Access 2000. You are going to 
need a database if you want to do Active 
Server Pages. Sadly, Mac users will need a PC friend 
or access to some other database technology such 
as the Java Database Connectivity interface. 


jest: 


9 | The content lives in a table not surprisingly 
called tblContent. It has fields for title, content, 
picture, link, writer, email address and a unique 
autonumber again. All that's needed now is some 
data to be put in these tables. 


Part 2: Getting dynamic 


Now we're ready to start placing dynamic content into JournoXtreme. 
This will be both the navigation and the body sections of the site 
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The sidebar table is filled with some data. This 

will be the main menu system of the site so the 
basic navigation items are needed. As you will see 
later this can be adapted to be more sophisticated in 
terms of presentation. 
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Opening sidebar.asp we add our first 

recordset. To do this we need a ‘connection’ to 
the database that we made through ODBC. For the 
moment, the runtime and design time can be left 
the same. This can be changed for full deployment. 


PAP EOREE: 
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The recordset is defined as being the table 

‘tbISidebar’ ordered by the ID field. You could 
add an order field to control order directly, and 
another to make the sidebar change under 
different circumstances. 
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A table has been made in the cell to the side 

and the SideBarText field dropped into it. By 
selecting ‘Live Data’ this item will read ‘Home’ — the 
text in the first record of the tblSideBar table. Setting 
it to Arial will add a font face tag. 
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For more than one item to appear, the table 

containing the menu item needs to be 
repeated. After selecting the table go to Server 
Behaviours and use ‘Repeat Region’. Choose ‘all’ 
records unless you have lots of items. 
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First we set the link to the field SideBarLink. 
We set the target tag to ‘_mainframe’. This will 

be the name of the frame element we want the 

menu to modify. This could be sourced from a 

field if desired. 


Depemet inde ot 
Repeat t__owedoesseyestl_seeows-i 
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In order to test the active content we can 

select ‘Live Data’ and the menu items appear. 
A real test is to go back to the database and alter 
the font and then turn Live Data off and on again 
to see the change. 


6 | Once you have the font tag under control, it's 
easy to set all the font aspects to source from 
the database. The ‘font face’ tag has its problems, 
so be wary of using this technique where strange 
browsers are likely to be used. 


9] Pressing F12 launches a browser and enables 
us to test the page. Clicking on the menu 
should cause errors on the right because most of 
those pages don't exist yet. Now we need to create 
news.asp, a more complex ASP file. 


Part 3: Content is king 


We have a simple navigation system working, but we need to add some active content to 
the ‘body' section of the page. This will turn just a few pages into an entire site... 


ae = ee 


The news page starts like the sidebar page, 
but with a more complex recordset being 
created. What we require is the last five news items 
in reverse order. So the query is ordered by 


contentID — this increments automatically when 
each new item is added. 


To display the news in an attractive layout, a 
simple table is defined and the fields added to 
it. To avoid long screen scrolls, the maximum 
number of stories is limited to five. We need some 
icons with Next and Previous on them. 
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Testing the news to see if it works — it looks 

fine. The graphics items are sourced from the 
‘ContentScr' field. You can either have an empty 
picture file for ‘no picture’ or a bit of code to hide 
the error if the field is blank. 


4 | To connect the person's name to their email 
you must direct the link to the field containing 
the email address, in this case ‘contentbymail’. You 
have a choice here: either add ‘mailto:' to the 


reference or in the actual data. 
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You do not need to input all fields. If you named all the fields the same as those 
ContentCreatedWhen is automatically filled in your database, U/traDev does all the what- 


by Access by setting the default to Now in the goes-where for you. This form can be copied and 
table structure. When done adding fields, a Submit adapted to serve as an editor of existing stories. 
button needs adding and giving the behaviour of Drop the fields from data bindings into the 
‘Insert Record’. appropriate locations. 
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Created in //lustrator 9, these icons are added 

as Rollover Images, with both highlighted and 
non-highlighted versions. Once placed they are 
given the behaviour ‘Move records’ and ‘Hide’ 
when not required. 
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6 | What about adding new stories without having 
to FTP up a new database? The newnews.asp 
file is created and a recordset made to point to the 


‘tbIContent' table. Now we can make a form and fill 
it with text fields. 
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9 | After deleting the insert behaviour, the button 
is empowered with update behaviour. Aside 
from a few cosmetic changes, this is just like the 
‘new news' form. One other change was that 


the recordset was reversed so that the last stories 
appear first. 


Part 4: Finishing off... for now 


A little more active content in the form of a links page and a 
password-protected admin area complete the tutorial 


Dynamic images 
There are limits to just how 
dynamic things can be, and 
images are a good example of 
this. These can be dynamic in 
respect of the HREF, and can be 
sourced from a database record, 
making the content dynamic. As 
yet, though, you can't place the 
image in the database. One good 
use for this is to have images and 
Flash objects in a table and pull 
each based ona test for the Flash 
plug-in on the first page. This is 
used often; look out for ‘?Flash=1' 
references in URLs. 
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The structure of ‘tblLinks’ is simple. The only 


subtlety comes in the ‘linkfirst’ field that © This field will contain the subject only on the For the security to function properly, a table 
identifies which record will be the first in each first record and hide it ever after. We still need called ‘tblSecure' is made with both name and 
subject section. In a query we can use thisto make a _ the real field for sorting purposes. This is the result password fields. The extra admin menu items are 
calculated field, by using this statement: when used on the page: sub headings and links in placed in a copy of tblsidebar with the extra field 
LinkSubjectView:f([LinkFirst], [LinkSubject],"") perfect harmony. ‘person’ added. 


# 
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4 | Back to Access. This query will drive the menu. As a double-blind check, the recordset is To test the mechanism we need to prime the 
Joining the two tables in this way means that if filtered by both ‘person’ and ‘password’ live data with the correct elements. The person 
you don't have the password there are no records in parameters. This involves using the Advanced part is ‘admin’ and the password is ‘plantpot’. These can 
the table. To complete the exercise this needs to be of the query definition. If only one was required, the be added to the URL, but providing a form to fill in 
processed in the ASP. Simple query mode would have sufficed. would be much slicker. 
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Making a simple form with two fields is 


8 | This small piece of VBScript creates a dynamic This shows it all works! The index.asp frameset 
straightforward enough. The password field frameset reference. This is a little beyond called with the correct parameters displays 

can be set to ‘password’ so it shows stars when you UltraDev's understanding — so it might give you a admin menu options and allows you to edit the 
type. There is only one issue — passing these few errors. Irrespective of UtraDev, the parameters news stories. As an added level of security you 
parameters through the frameset to this page. are passed on to sidebar.asp successfully. should secure the database also. FEES 
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BBC Online: the home page. Plus some of the most popular and 
diverse channels on the site: Walking with Dinosaurs, 
Gormenghast and Doctor Who, all immensely popular television 
Programmes with a huge Internet following. “Having worked 
across such a wide spectrum of the sites, | can safely say that 
together they fully encapsulate the BBC’s mantra of ‘Educate, 


Inform and Entertain’,” says Miles Green, coder. 
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On the official Doctor Who Site 


OOCTOR 


WHO 


VOTE & 


What percentage of 
your VHS tapes are 
you planning to 
replace with DVDs? 


BARDON FACT 
Michealjohn Harris is 
the person whose 


name is most often 
misspelt on Doctor 


Who's dosing credits q 


CULT QUIZAASTER 
Test your knowledge © 


of the Seventh Doctor | 
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When a huge corporation such as the BBC goes online, it needs tools 
that can do the job properly. Tools such as Dreamweaver... 


he BBC has always had an unparalleled 
reputation for media broadcasting, so 
expanding to the Internet was a natural 
progression for the media giant — and it 
certainly hasn't been half-hearted about it. In the 
space of a few years, the content, scope and ambition 
of BBC Online have made it one of the biggest and 
busiest content-driven sites on the Web. 

There are eighteen major channels or individual 
sites in BBC Online, each with a number of sub- 
channels to help visitors access the information they 
want. The site as a whole attracts over 190 million page 
impressions per month, across 500,000 pages of 
content. The growth and maintenance of each channel 
is amammoth task and it falls to David Gordon, Head 
of Design, to ensure that the branding, navigation and 
links are consistent throughout the whole site: “It’s got 
to be as easy as possible for a user to find their way 


around the vast amounts of information,” says David. 
“We don't want people to have to learn a new method of 
navigation each time they visit a different BBC site. 
They should instantly understand where they are in 
relation to BBC Online as a whole.” Design may change 
across channels to keep it fresh and distinct, but the 
main elements remain faithful to the original. 


Of mice and mountains 


The role of Dreamweaver in the extensive work of 
developing the various channels reflects the flexibility 
and practicality of the program. Being aware of the 
limitations as well as the needs of site visitors is of the 
utmost importance. Also, juggling the design and 
programming of the site between coders and content 
producers means there is a process that has to be 
followed closely to avoid disaster... 


Fossil hunting this weekend? 


arts 
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“While designing and constructing a site we have 
regular contact with its producer and editorial team in 
order to fully understand their intentions and 
expectations of the site’s functionality,” explains Miles 
Green, coder at BBC Online. “We're often required to 
advise them on the best way of implementing ideas, 
especially if their original plans are outside the 
practical and technical limits of the Web.” 

He continues: “We also enforce a number of 
technical restraints such as download times, page 
widths, cross-browser and cross-platform 
compatibility, and also alternatives or graceful 
degradations for the older and more obscure browsers. 
Being a publicly-funded service, it’s important to 
ensure that we make pages that don't exclude anyone 
because of their chosen computer set-up. These all 
need to be considered when designing and 
constructing a site.” 

Once design plans are finished, work begins on 
constructing the new site. “Most of the initial work is 


Dreamweaver and the Art Zone Website 


Dreamweaver is essential for the day-to-day running of the BBC Online's Art Zone... 


This is the template that the producer has to work 
with — in this case to create a page for 
www.bbc.co.auk/artzone/artsfocus. Basic page layout is 
created by designers and coders, providing a specific area 
to fill with content and images. Copy is added and 
colours used, provided that - when completed — the page 
fits in with the look and feel of the rest of the category. 


Eocaeees 


4 | If you are well-versed in HTML, however, you can 
click through to the HTML source screen on the 
launcher toolbar on the bottom right of the interface. 
This allows you to put in more complex changes to the 
text and also allows you to scan through the code and 
troubleshoot to get rid of unnecessary tags or elements 
that might cause problems later on. 
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2 Dreamweaver is less intimidating than other 
applications because it enables you to see what 
you're doing and how the page will look. Adding content 
is easy: you just type it into the appropriate section. Using 
the Properties palette, you can make changes to 
formatting, links and ALT tags. The palette also enables 
you to alter the position of the text on the page. 


g Images can be dropped into the Dreamweaver 
template using the image source icon on the Objects 
toolbar. The images are first of all prepared in Photoshop 
and then stored on the network. It's then a question of 
placing the cursor at the appropriate point in the 
template, calling up the Select Image Source window and 
dropping the selected image file into location. 


done manually in Allaire Homesite to ensure we 
comply with our own coding technical requirements. 
When we've set up the page structure, we pull it into 
Dreamweaver. You can easily switch between the two 
while working on a page. With the site properly 
defined, we are able to save the pages as templates 
with locked non-editable regions. The content 
providers then use Dreamweaver to update the pages 
without affecting the original design.” 

This process keeps pages consistent and structured, 
and enables those producers with limited HTML 
experience to use Dreamweaver templates to continue 
filling pages with content, while the coders move on to 
new projects. “The template aspect of Dreamweaveris 
by far the most used feature here at BBC Online,” says 
Miles. “Sometimes it’s necessary to start adding 
content to pages before we have finished constructing 
the whole site. By handing over templates to the 
content producers, we can let them continue adding 
their content to the pages we have completed. If we 


3} Manipulating the content — choosing the font, font 
colour, style and point size of the text - can all be 
done using the Properties palette, too. It is so much easier 
than typing in HTML code as it uses the familiar icons of, 
say, Word. Linking text to other areas of the site, or the 
Web, is also as easy as typing in a link. There's no need to 
worry about applying complex HTML codes. 


G Now it's time for the finishing touches. The page is 
only complete once the colours have been chosen, 
the copy has been inserted and proof-read, the images 
have been selected, and any links have been added. The 
file is then uploaded to a BBC development server using 
FTP. Once there it goes through some final checking 
processes before it goes live online. 
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need to make an alteration to these pages we can 
simply give them a revised template. Dreamweaver 
will then use the new template to amend all the pages 
they have made from it. This would otherwise prove 
very time-consuming and difficult, especially on sites 
where there are numerous fact-files, listings or 
glossary pages.” 

From the point of view of the content producers, this 
is an ideal way of working. “Dreamweaver can be used 
for all aspects on the site | work on, but it comes down 
to personal choice,” says Claudia El Khoury, Assistant 
producer of the Art Zone channel. “I find Dreamweaver 
less intimidating to use than other applications 
because you are not faced with reams of HTML, yet you 
can still access the source code if required.” 

Many of the tools in Macromedia’s WYSIWYG editor 
are simple to grasp and extremely useful for both 
beginners and experts. “I use image replacement tools 
mostly and the floating palettes which allow you to 
change links, alter tags and so on easily — even with a 
basic knowledge of HTML. It's very much a select- 
and-replace system and enables you to view the 
changes immediately, which saves time.” 


Tomorrow’s World 


Just like any Website, the BBC will inevitably grow and 
evolve as it incorporates more and more content and 
welcomes more and more visitors. So what are the 
future plans for BBC Online? How will they continue to 
effectively manage the vast amounts of content without 
becoming inaccessible? 

It’s David's role to keep BBC Online moving in the 
right direction and maintain its status as a leading 
news and content provider. Following last year’s 
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redesign, it’s time once again for a change. “When BBC 
Online started out, we already had a number of small 
sites to play with, so we didn't have a clean slate. This 
time we're planning on starting again, on a conceptual 
level, with a completely blank piece of paper.” 

After gathering feedback from users and designers, 
there are many issues that will be addressed by the 
changes, such as usability, navigation and branding. 
One of the main obstacles is the sheer volume of 
content — how can the home page reflect everything 
on the site? “We aim to improve the definition of the 
site, to make it clear for users what happens where. We 
don’t want people to stay on the home page, we want 
them to explore,” says David. “Firstly it's important to 
create a cohesive system of navigation so users can 
easily access different areas of the site or get help with 
whatever page they’re on. Creating global elements 
like this is definitely a design challenge but a 
necessary one.” 

Another crucial factor is incorporating the television 
and radio aspects of the BBC without losing the 
interactivity and dynamics of the Internet. “We are 
transforming the content of BBC Online to address the 
medium; in particular moving away from pure 
programme-based sites, but using these brands and 
personalities to lever more Internet-specific content.” 
Sounds promising. “And of course we'd like to lighten it 
up a bit, make the whole experience more enjoyable.” 
We're unlikely to be witnessing Flash intros and 
Shockwave games in the future, but a clean, accessible 
and entertaining site looks like it’s just on the horizon. 
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1. Art Zone is a recent addition to BBC Online with 


Golf McAllister appeal news, features and commentaries on arts, sounds and 
Motorsport en poetry from around the world. The section features 
Athletics : Caen Sci artists’ profiles, links to arts resources on-line and 
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2. The Display section is part of the Art Zone channel 
and offers digital artists the chance to send in their 
own work for the public galleries. It’s a good 
opportunity to get your work noticed and receive 
some feedback. This example is Untitled by Darrell 
Jones. Sit back, relax and watch the sun rise. 

[w] www.bbc.co.uk/artzone/display/yourwork 


3. Here's one they made earlier. The Takeaway area 
features animations that you can download to your 
own PC or Mac. These digital compositions by up- 
and-coming artists have been created for you to view 
and keep on your computer. Download the work onto 
your hard drive and simply double click on the icon to 
run. This is Julian Opie’s superb portrait Virginia 
2000, a static face that blinks intermittently. 


Whole, separate sites reside in the BBC Online network. BBC News 
[w] news.bbc.co.uk is one of the most visited sites on the Web and 
includes news tickers and streaming video and audio. The relatively 
new Sports section [w] news.bbc.co.uk/sport is also continually 
updated with photos, news, results and reports from all over the world. 
Specialist sites also exist - BBC Food is an extensive resource of , on revi 
recipes, dietary information and news. hf a 
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Designing a 
great Web page 


Creating a top-end Website demands great 
copy, superlative design and superb visual flair. 
Follow our tutorial to see how it's done... 


esigning great Web pages is 
tough — not least because 


4 i HTML is a stubborn mule to 


work with, and was never 
conceived with serious graphic design in 
mind. Which is why one of the most 
Popular — and effective — ways to go 
about the job is to start in the design app 
of your choice: Photoshop, Fireworks or 
Illustrator, perhaps. 

We've used Fireworks for the early work 
— its vector tools encourage you to get 


creative with flat areas of colour, which 
works well on the Web. And its slice, 
optimisation and export facilities are 
second to none. But if Fireworks isn’t an 
option, don’t worry — we've included a GIF 
document on the cover CD too. 

Better still, the design we're creating 
works just as well on a large, high-traffic 
resource site as a ten-page company 
Portfolio. It’s easily extensible, too, and 
that’s important if you want to see your 
hard work survive its own success. 


Illustration: Matthew Harvey 


Part 1: Where to start? 


It's always worth putting in loads of effort in the initial 
planning stage, to save yourself headaches later on... 


Fresh tomoto news 


While you're creating your initial design, you 

need to think carefully about how you can 
implement it in HTML. If you use guides to control 
your layout, you'll find converting it into tables 
much easier. Now's a good time to make final 
decisions on fonts and colours, too. 
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When you're ready to start work with 

Dreamweaver, set yourself up a site via 
Site>Define Sites, and add some folders for artwork 
and content placeholders — keep it all organised from 
the first. Choose File>New file. 


In Modify>Page Properties, set your 

background colour (black here), as well as your 
text and link colours. You can apply a tracing image 
here too, which you can use to put your design in 
the background while you're working on the HTML. 
View>Tracing image offers extra options on this. 


4 | Next, you need to start laying out your basic 
table structure. Use the guides in your original 
design to calculate the exact numbers of rows and 
columns you want, and their sizes. Create an extra 
row, and stretch 1px transparent GIF images in each 
of the columns across the top row, to force the 
columns to exactly the right size. 


Mente iy RISESeR oe 


Gg We're using a 750px, 11-row table with eight 
columns at 10, 10, 170, 20, 390, 10, 130, and 
10px, and we're going to add the content and 
navigation elements as further, embedded tables. 
Next, colour up the background of your cells, and 
merge the appropriate cells by selecting them 
together and pressing M. 


G Now you want to bring your core static 
graphics in - logos, headings and so on. For 
the best results, you should lift these from your 
initial design and export each one individually — 
Fireworks’ Camera tool (hit J) is ideal for this. 


Part 2: Navigation 


Now to add your navigational elements — possibly the most 
important part of any Website. There are two basic ways... 


The easiest way to create your navigation 

element is probably to slice it up in a separate 
document, in Fireworks or ImageReady, then copy 
this code into your HTML. Remove images in blank 
areas to save file size — like the green gaps here. 


Alternatively, you can export the buttons and 

states individually, and use Dreamweaver 3's 
new Insert Rollover Image object in the Common 
toolbox. Either way, be sure you get the images’ 
crop sizes right, so they fit tightly to your tables. 


Finally, give all the appropriate images Alt text 

in the Properties Inspector, and while you're 
there set the Low SRC element to your transparent 
GIF — it results in a tidier download in Netscape. 
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Part 3: Style sheets 


Work out your basic formatting rules before you start adding 
any actual content, and make sure they're consistent... 


Fresh tomato ne+— 
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1 | If you're working on a site that's larger that Find your CSS Styles palette, via Window, In the Style Definition dialogue that appears, 

just a couple of pages, you must use style and then click the New icon at the bottom. set the font to Verdana, Arial, Helvetica, sans- 
sheets. We can't emphasise this enough. Style The first job is to create a general body style serif, and set the size to 11 pixels — using the units 
sheets make your site consistent, offer much tighter —_ governed by the <p> tag, which appears when you drop-down menu beside the size field. Hit OK, type 
control over formatting and positioning, and enable _hit Return. So choose Redefine HTML Tag and in some text, hit Return, and you'll see how this 
you to easily change a style site-wide. choose P from the drop-down menu. works. Looks much better, doesn't it? 
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— 5 | Now you can select text, click on the style, G This enables you to use CSS style sheets to gain 
4 | Next, you need a subheading style. Create and it's applied automatically, using the syntax tighter control over the look of your links, and 
a new style, but this time select Make Custom <p class="subhead" >subhead</p>. Finally, create how they behave on rollover and click. Create a new 
Style (class), and call it .subhead. In the Definition a heading style, with 26px bold Arial, Helvetica, style again, and this time redefine the <a> tag, 
dialogue, simply set Weight to Bold, hit OK, and sans-serif in a maroon colour, plus a caption style setting Decoration to None. This prevents the 
then you'll see it in your CSS palette. at 9px, and format your text... underlining on your links. 
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Now create another new style, but this time — 9g In the Box section of your Style Sheet 

choose Use CSS Selector in the New Style 8 | You can add colour background to your links, Definition dialog, you can set Left, Right, Top 
dialogue, select a:hover from the drop-down, set and other features too. Click the Open Style and Bottom margins, which work with the <p> tag 
the colour your want links to appear on rollover, and Sheet icon on your CSS palette, double-click the to control text indents — you might want to define 
set Decoration:Underline, so your links underline on __ style to edit it, and choose Background in the left the bottom margin for <p> as 10px, for tidier 
rollover (this doesn't work in Netscape below v6). pane. Hit Apply to see what the effect looks like. spacing. Box offers some useful options too. 
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Part 4: Templates & library items 


More advice to improve your Website- building 
skills — and ensure ultra-tight construction... 


Choose Save As Template from your File 
- : —— menu, give it aname, and save. Dreamweaver But you need content areas where these pages 
ae Finish off adding in your content and pictures gives it the DWT extension, and saves it into a are different from the template, which means 


(you might need to to use your transparent dedicated Templates folder in your site, with all the creating an editable region. Put the cursor beside 
GIF to keep the spacing tight), and when you're links automatically updated. The theory is, your Fresh Tomato News heading, then select 
happy with what you've got, you're ready to turn whenever you change this page, the changes are Modify>Templates>New Editable Region, or hit 
this page into a template for the rest of your site. applied to all pages via this template. Ctrl+Alt+V, and call it ‘heading’. 
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We also want the content area to be editable, G Save and close the template document, and 
4 | Now you need to go into the code and put which is where using an embedded table from your File Menu choose New From 
the editable region around the graphic. makes life easy. Put your cursor in the table, and Template, select your template in the dialog, and 
Click Window>HTML Source, and find the <!— click the <table> tag at the bottom-left of your save the new page in your site. Now you can 
#BeginEditable “heading” —>{heading}<!— window to select it. Now choose Mark Selection As change anything in the editable regions, but not 
#EndEditable —>, then move the heading image's Editable, calling it ‘content’. Make another editable outside - you can only do that via the template. 
<img src ... > tag in place of {heading}. area for boxouts in the right column. Create more pages for different parts of your site. 


Part 5: Library items 


For anything but a tiny site, creating libraries is an essential organisational step... 
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1 | If all goes well, your site's going to expand — 
pretty quickly, and that'll mean creating clever Open the Library palette, click the New icon, Finally, go back to your Fresh Tomato News 
ways to help people navigate around. One good call the item ‘latest’ and open it. Create a table page — or whatever you've called it — delete 


idea is a ‘latest articles’ boxout on every page, in and graphics for the box design, as before, then add _ the {boxouts} in your boxouts area, then select your 
your editable boxouts region. Rather than update all some text and links, and save and close it. You library item in the Library palette, and click insert to 
your pages, though, you can create a single library might want to create a style with margins for the put it in your Web page. You can now go back and 
document, and Dreamweaver deals with the rest. text — do this in your template. change the original file as much as you want. 
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Part 6: Interactive forms 


Forms are fantastic for adding interactive user feedback elements 
to your Web pages — but they can be a little tough to work with... 
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Fresh tomato news bese 


1 | If you want a horizontal layout for your form, 
you'll have to get clever with a table to hold 
everything in place. So before you do anything else, 
replace your content table with another — say, three 
columns across and ten rows deep. 


Fresh tomato news 


First, put text labels for all your fields, aligned 


right, in the left-hand column. Now merge the 
cells to create plenty of space for the form elements 
— one of the biggest bugbears about this aspect of 
site design is that the elements render at different 
sizes on all the different platforms. 


4 | Now select your Text box and fill in its 
Properties, then duplicate and change its 
name for the other bits of information you want to 
collect. Set its character width to about 30, and then 
set the Comments box to multiline - about five lines 
long. Add a submit button too. 
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Finally, you can get better control of the width 

of the form elements in the code by typing a 
style into the form tags — something like <input 
style="Wwidth:200px">. This works in /E and NS6, 
so you can now adjust the normal HTML character 
with property to work ideally with Netscape 4. 


iw ie sO EO Se] 


If you preview this, it looks okay, but not great. 
Thankfully, you can control the formatting - 
for JE and NS6, at least - more accurately with a 
style. So back in your main template, create a new 
CSS style called .forms, allocate a font, size and 
colour, then save your template and update pages. 
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Find your Forms toolbox, and put a Text Field 
next to the name field. Dreamweaver asks if 
you want to add a form tag. Click Yes, then go into 
the code, find the <form> and </form> tags, and 
move them around your entire content table. 
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6 | Back in your form Web page, select the form 
elements individually and apply your forms 
style from the CSS palette. You can also use 
background colours, 3D colouring and so onin 
your original style, to get better results. 


You might also want to make the Where Are 

You From? field into a drop-down menu. So 
replace its text field with a List/Menu object, check 
in the Properties that it's set to Menu, then click List 
Values and add in the options you want to offer. 
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Finally, you need to select your form in the 
bottom-left of the window, and give it aname 
and action - which tells the browser the URL of 
the code document that handles the clever, behind- 
the-scenes stuff — your server provider will tell you 
this. Now you're done! EES 
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Welcome to Pintall Royale ! 
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Kerb 


Kerb is a company with a flare for youth marketing and keeping 
its staff - “No-one has ever left to work elsewhere...” 


f you go to [Ww] www.kerb.co.uk, you'll see the 
words ‘Kerb: close to the edge’. This 
Brighton-based company specialises in 

| youth culture-orientated design, serving up 
spanking gorgeous Websites for the likes of Pot 
Noodle, Disney, Pepsi and Louise. 

Contrary to its name, Kerb is currently on the road: 
“We're in an office-moving truck, somewhere in 
Brighton!” Pete Barr-Watson tells us. “We're moving to 
new offices, employing more people and looking at 
overseas opportunities — it’s an exciting time...” 

Kerb was set up in 1996 by current CEO Jim 
McViven. It’s shifted from a one-man venture to a staff 
of twenty, none of whom have left. “It’s the combination 
of cool work, location and atmosphere,” Pete explains. 
“It's a lifestyle decision to work in Brighton. We start at 
10am, and we all get on really well...” Kerb’s staff have 
studied Graphic or Interactive Design, with the 
exception of Pete: “| gave up crap jobs to become a 
freelance Web designer, and through getting involved 
with Macromedia | met up with Jim.” 

Macromedia has had a strong impact on this fresh- 
thinking team. The company’s house style has as much 
to do with ideas as its command of Dreamweaver, 
UltraDev and Flash, all pushed to their limits on G4s 
and Pill 600s, with 128MB RAM and 15GB hard drives. 

“We use Dreamweaver for everything — even a Flash 
site goes through it. We've used other packages when 
coding Cold Fusion or ASP but not since UltraDev. 
We've been using DWsince version 2. At the time, 
WYSIWYG packages had a bad name because of early 


versions of FrontPage, and it took a while to get 
adopted by hardcore notepad coders. | remember 
news group postings about how you couldn't be a 
‘proper’ Web designer if you used DW but didn't know 
code. But interface design, usability and attractive 
design are more important than knowing HTML when 
packages like DW export good, clean code.” 

Pete recalls creating the Louise site as the time 
when UltraDevwas truly a Web developer's godsend: 
“It was invaluable. Extending DW/UltraDev from the 
Macromedia Exchange site is so useful, and the 
interface is intuitive. My only dislike is that you have to 
launch a separate window to see the source code — the 
ability to be able to edit code or visuals from the same 
split window would be cool...” 

Pete stresses the importance of getting to know the 
tool: “Even if you don’t use DWas your FTP client, 
knowing how the version control system (check in — 
check out) works is vital. When we were working on 
student 24-7.com (now stewed.com), we had to split 
our team between offices. Using check in — check out 
helped us avoid overwriting, as different sections 
carried out their tasks.” 

Kerb intends to keep putting this experience into 
practice, working right now with Eidos, Meanfiddler 
(Reading and Leeds festivals) and EMI Music. And look 
out for the new Pot Noodle site, with a brief based on 
‘the cult of the noodle...’ EEE 


_— 


1. This is a Flash site based on a 3D pinball machine, which 
serves as the navigation method. “It’s taken a great deal of work 
to get the physics right, but the site is now looking awesome. It’s 
a real twist on the normal kind of Flash site you see.” The site is 
due to go live sometime in September. 


2. “This game was originally going to be built using 
Director/Shockwave,” Pete Barr-Watson explains, “but our 
main Flash designer was pretty confident that he could do it 
using Flash 4, so we went for it. “The result is a cool game that 
EA/Bullfrog was happy to use to promote the release of Theme 
Park World.” 


3. The Pepsi email game was used to promote a ringpull- 
collecting campaign by Pepsi. “It was very well received, and 
contributed to the success of the campaign a great deal. The 
final .exe file was run through Third Eye’s Jugglor software to 
create a well-running protected executable.” Check out 

[w] www.kerb.co.uk to download the game. 


4. lon Bar in Notting Hill is a trendy venue owned by 
Meanfiddler (Reading/Leeds Festival). “They wanted a site that 
showed a story about the different times and events at the bar, 
so we set about creating a site which you could view from 
different camera angles.” The site is due to go live soon. 


5. “This is a screen from our own Website showing our patented 
ice cream navigation method. Since the site went live earlier in 
the year we've received hundreds of comments, all 
complimenting the site and its humour and design. It’s a perfect 
site for Kerb — Brighton's New Media Bad Boys!” 


6. The Kerb crew in all its glory. This is the start of the Kerb site 
biography section: “It's kinda based on the ‘Batcave’ thang, but 
with robots instead. Check it out for some bizarre transformer 
action!” 
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Macromedia Exchange 
for Dreamweaver 


Exchange ideas and increase productivity with Macromedia... 


s soon as release 3.0 hit the 
shelves, it was obvious that 
Macromedia had placed a 
large emphasis on the 
lity and extensibility of 
Dreamweaver, as well as the general 
user-friendliness of the software — the 
release even giving devoted users a 
chance to redefine the entire UI and 
menu systems (depending on a good 
knowledge of JavaScript and XML). 
But for those of us with a little less 
interest in user interface programming 
and a whole Lot more in Website design, 


Macromedia introduced Exchange for 
Dreamweaver. The idea is simple: go to 
[w] www.macromedia.com/software/ 
dreamweaver and point your cursor at 
the link to Exchange. Here you'll find all 
sorts of extensions for Dreamweaver. lf 
you don't know what an extension is, 
you'll have been missing out on a whole 
load of productivity. If you're in the know, 
then you'll appreciate just how important 
those extra behaviours, commands and 
objects for Dreamweaver can be — either 
while struggling to meet a deadline when 
writing the equivalent reams of code is 


simply impossible, or, purely for 
experimentation, by bringing new effects 
and interactivity to your site. 

Exchange for Dreamweaver brings 
together the hard work of many DW 
fanatics — Web gurus who strive to make 
the design process as slick as possible. 
They do this by providing behaviours, 
actions and commands for all to use, and 
they do it all through Exchange. 

The extensions available at the 
Exchange enable you to achieve all sorts 
of results. For example, fancy detecting 
visitor's browser type and redirecting 


Illustration: Bryn G Owens. Email: bluntdog@ht 


them to instantly embedding QuickTime 
movies where appropriate? There’s even 
a behaviour that enables you to connect 
to back-end databases, quickly and 
easily, and all from within Dreamweaver. 


Easy access extensions 


Macromedia has also done a splendid 
job of arranging these extensions. Forget 
trawling through a site to find a specific 
download; this fantastic archive is 
superbly organised. Each extension has 
its own page, including the actual 
download, a short, but suitably 
explanatory description and, perhaps 
most handily of all, user ratings and 
reviews (there’s also an opportunity to 
rate any of these extensions yourself). 
Finally, there's a discussion group where 
you can — yes, you guessed it — ‘discuss’ 
how to make the most of the plug-ins. 
Macromedia’s featured extensions 
appear as soon as you load the 
Extensions page — so immediately you 


are presented with what Macromedia's 
developers think are great add-ons — 
and, let's face it, they should know. And, 
of course, for extensions that are a little 
harder to track down, there's a basic 
search in which you can enter keywords 
and so on, plus an advanced search in 
which you can search for extensions by 
name, category, author, type and a 
number of other criteria. 

To make things even easier, 
Macromedia has included a pull-down 
menu at the top of every extension page 
which provide access to different 
categories, as follows: 

+ Browser Compatibility These focus on 
browser detection and redirection. 

+ App Server These help in the 
connection, viewing and formatting of 
dynamic content from Web app servers. 
+ E-Commerce Self-explanatory really — 
catalogue creation and online shopping. 
+ Navigation Help with updating, and 
storing all those navigational elements. 


Navigation Extensions 
ick on the column tame to sort 


All the available extensions at Macromedia's Exchange for Dreamweaver are listed in 
alphabetical order and by category — so no more searching for that elusive download. 


welcome 
(you are not rob alike 


Tie Hecrommde acta for Orvamvenrr the piece tot eny-to- Intell weeing 

learn how to get the most out of them, and even create your ov: 

easily add new features to Dreamweaver 3. Each extension hes 

felon, estar escrito, ener reviews and diacuasien group 

nd sper for an extension. All ‘Macro 
Dreamveaver Ul 


acaporoved extenoion fered 


the Extension Manager 
rot Ap version (1.1) of ha Exanaion anager iene eviabe! Vet te Lianne 
Canney Ser Dke 22m to upsate re today. 


The Extension Hanager rune vithin Dreanmennvar 3 ond Ana yo ely intl ery 
notes nd tae rack of hone yu aenty have, te dw ntoaded Pon $0 (rate be eevee 

{he Extension Hager can launch the Extension aon in Dreemveaver 3 

tr Dreemvsever Uitrobey by choosing “rienage Ex 

after you inate i Dreemueever 3 waar 


This download j9 net required for Oreamveaver UitraDer, as the Extension Manager ie 
{nsaed with ie application by nfl. Extension Gvelpers shuld downlod thie 

‘natalier, however 3 it includes the packaging tools required for submitting your 
enaiae to ton Exchange 


* Scripting Help with scripts for both 
Dreamweaver 3 and browsers. 
; egies Help you add custom 


ge objects and elements within a page. 
Re or muti * Rich Media Extensions which help with 


embedding external players such as 
Shockwave and QuickTime. 

+ Productivity There for obvious reasons! 
+ Security Add varying levels of security 
to your pages. 

* Tables Help speed up the process of 
creating and manipulating tables. 


Log in, sign up — Exchange 


Dreamweaver enthusiasts eager for more should 
seriously consider joining Macromedia.com... 


Before you can download extensions, for Macromedia product you don't yet 


you'll need to become a member of receive info on, it can all be changed in 
[w] www.macromedia.com. But the vast the wink of an eye from the newsletter 
amount of extensions aren't all you get. preferences page. You'll also be able to 
You'll also receive The Macromedia Edge _ easily track your online store account 
—anewsletter that you can literally information and order history. 
customise to suit your specific needs. But, let’s face it, the main plus point 
Whether you just want to receive about becoming a member is the 
information on Dreamweaver, or want to incredible amount of invaluable 
find out about Macromedia’s entire range —_ extensions on offer. Once you've 
of products, then you can set the acquired your ID, you'll be able to take 
newsletter preferences accordingly. full advantage of the site. You'll also be 
You can also specify the type of able to set up and access the Your 
information you receive — from the latest Extensions page in which you can keep 
product news to tech notes, training and track of and generally evaluate your 
Macromedia related events. But don't favourite extensions. Oh, and one 


worry; if you suddenly discover a passion _ more thing — it’s free to join. 
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+ Fireworks Concentrate on integrating 
Fireworks into Dreamweaver. 

Before you begin downloading all 
those extensions, it’s definitely a good 
idea to download Macromedia's own 
Extension Manager. This is a free add-on 
that enables you to install new extensions 
and keep track of ones you've already 
downloaded. Simply launch it within 
Dreamweaver 3 by choosing Manage 
Extensions from the Commands menu. 
You can pick this up at the Exchange for 
Dreamweaver homepage. 

At this point, though, it’s worth 
remembering that although most 
extensions are free — created and shared 
for the love of the Dreamweaver 

community — some do cost money. 


“Macromedia claims s that this is because 


— 


TS actually make 
Be that as it may, if 
enough, you 


ek un. same job, so don't 
necessarily settle on the first extension 
you lay your eyes on. 


Macromedia Approved 

So, you've downloaded the Extensions 
Manager and found an extension that 
takes your fancy, but what happens if you 
download what seems to be the perfect 
extension, install it, try it out, and it turns 
out to be, well, useless? That's where the 
Macromedia Approved seal comes in. 
Spot this and you can at least be safe in 
the knowledge that a) the extension 
works and b) the extension’s interface 
integrates tightly, and won't look out of 
place, within Dreamweaver 3. 

Another way of checking if the 
extension is up to scratch is to find out 
the star rating. These are awarded by 
users who've downloaded and worked 
with the extension before, so they should 
give you a pretty fair idea of what's a vital 
download as opposed to a real turkey. 
Also check out the reviews section — 
again these are written by users, so 
you’re guaranteed an unbiased opinion. 

Another handy little feature that 
Macromedia has included to help you 
keep track of your favourite extensions is 
the Your Extensions page. You can use 


this page, once you’ve signed up (see 
boxout below), to swiftly return to your 
favourite extensions, and there’s also the 
opportunity to post reviews and 
comments and participate in discussions 
about other people's favourites. 

There is no better place if you run into 
trouble with an extension than the 
individual extension’s discussion group. 
Here you will find valuable advice about 
how to use the extension to its full 
potential. It's virtually guaranteed that 
someone here will be able to offer you 
advice — it could even come straight 
from the author himself. If you’re still 
stuck, you could check out one of 
Macromedia’s excellent forums. 


Technical discussion 


For the more technically minded among 
you, head off to the JavaScript and C 
forum at [w] www.macromedia.com/ 
support/dreamweaver/extend/form/ 
or for those just wanting some general 
advice on Dreamweaver and its 
extensions, point your browser at 

[w] news://forums.macromedia.com/ 
macromedia.dreamweaver 

One disappointing change with the 
Exchange is that all of the Dreamweaver 
2extensions that once littered the 
Macromedia Website are no longer found 
—at least as DW2 extensions — on the 
Exchange. All the extensions contained 
here only work with the Extension 
Manager and DW3. Macromedia does, 
however, offers good reasons for this: 
either a new feature in Dreamweaver 3 
made it unnecessary to include the 
extension, the extensions developer has 
chosen not to update it, or the extension 
is still being tested by Macromedia’s 
experts and will be posted soon. 

One of the most appealing aspects of 
the Exchange is how much input you can 
have in site content. The Dreamweaver 
community is bustling with new ways to 
use the ultimate Web design app, and 
everyone is willing to share. There's 
simply no better place to get hold of 
extra Dreamweaver 3 behaviours, 
commands, objects and much more — 
head over to [w] www.macromedia.com/ 
software/ dreamweaver, sign up, and 
join the community right now! EX 


To become a member of Macromedia.com is simplicity itself — just enter a few details and you can 
download all the extensions on offer. You can also subscribe to the newsletter Macromedia Edge. 


Ever wanted to perform masking 
that was virtually impossible by 


conventional methods? Now you can. 


Introducing Corel® KnockOut 1.5—cutting- 
edge masking software that'll revolutionise 
the way you design. 
It gives you fast 
precision handling of 
once-impossible image 
details, including hair, 
smoke, shadows, glass, 
fire, water, blurred objects 


and more. Now that’s sweet. 


Powerfully accurate masking. 
In a fraction of the time. 


Knockout. 


For Mac® and PC! 


www.corel.co.uk/corelknockout 


This advertisement was designed and created using award-winning CorelIDRAW® graphics software and 
Corel KnockOut masking software. 


Corel Tel.: 02072 988505 

Copyright © 2000 Corel Corporation. All rights reserved. Corel and CorelDRAW are registered trademarks of 
Corel Corporation or Corel Corporation Limited. KnockOut is a trademark of Ultimatte Corporation used under 
licence. Mac is a registered trademark of Apple Computer, Inc. All other product, font and company names 
and logos are trademarks or registered trademarks of their respective corporations. 
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Advanced UltraDev 


Don't be scared of databases — they're your 
friend. Well they are when UltraDev's involved... 


hile much of UltraDevis 
necessarily similar to plain 
old Dreamweaver, in the 
right hands it’s a powerful 
tool, capable of producing entire 
database-driven Websites. 

A database-driven Website might 
seem like overkill for smaller or mainly 
static sites — and it probably is. But 
for large, dynamic ones, such as 
www.computerarts.co.uk, the effort 
involved in setting up the necessary 
connections and dabbling with servers - 


SQL and the like — is far outweighed by 
the benefits of easy updating later on. 
And, by separating the content from the 
design, you can change either element 
virtually instantly without having to redo 
the entire site each time. 

This tutorial, like the one beginning on 
page 10, takes you through the process of 
setting up a practical database-driven 
site, but goes further by developing a 
search function and other handy facilities, 
which you can then customise further as a 
basis for a real site. 
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Part 1: Setting up your site 


As usual, there's plenty of admin to do before getting into the coding 
proper — but time spent here is far from wasted later on... 


a 
Local Root Folder: [ @ 
1 Relies Local Fie Ltt Automatically 
Oriy options above ave requited for local tes. 
Link Management Options. 
HITPAdsets: [hap 77 eT Tee ee 


(Cache: I Use Cache to Speed Link Updater 


(roe) cw te | 


ay In your PC, you have a fully working NT 
Server clone which turns your PC into a mock 
NT server, Go to Windows Explorer and check that 
your hard drive has a folder called C:/inetpub. If you 
do, we're all set. If not, download Personal Web 
Server or Internet Information Server from =—— Ultra 
www.microsoft.com. Mac users, refer to y 
documentation in the U/traDev demo for your 
equivalent folder details. 


R Now we know all the necessary files are in 
, we need to set up our site. Enter 
click Site>New Site from the menu. 
with a pop-up box and loads 
“of options. We're only interested in Local Info and 
Application Server Info. 


Live Data Server, |Loca! Web Server 
Live Data URL Prete [rite //ocalhost/ 


| ae = | 
4 | Click Application Server Info on the left list. 

Here you decide what technology your site will 
use. U/traDev can create ASP, JSP and Cold Fusion 
and uses either JavaScript or VBScript, depending on 
the technology of the host server (NT, WebSphere 
and the Allaire ColdFusion Server respectively). 


G Select ASP 2.0, which we will be using for this 
tutorial, from the server model dropdown. 
Then select VBScript (although it won't make any 
difference to the eye if you choose JavaScript). 


SteName[CompueAts SS 
Local RoctFolder [EVnetpubwewwmontic Sa 
F Aetesh Local Fis List Auomaticaly 
nly options above ave required for local ates 
Link Management Options 


HTTP Address: fre 7 


Coche: I~ Use Cache to Speed Link Updates 


|e Hele 


cy Type in any site name, such as Computer Arts, 
In the local root folder, browse and select the 
following stream C:/inetpub/wwwroot/CA. ‘CA’ is 
our root directory for the | project, and the bit before 
it is the location of your Personal Web Server. We 
can now create and view dynamic pages. 


App Servet info: 


00 
Detautt Scupting Language: [VBS crm x] 
Delaut Page Extennor: Wa ee, 
Live Data Server: | him 
Live Data URL Prefix: ey 


Ceo |_| 


6 | At this point, select the default page extension. 
Be careful with this; selecting ASP means any 
non database-driven pages will be saved as ASP, and 
vice versa for HTML, which can become very 
confusing after a large project. 


Home Page [C Unetpub\ewmmocticalsearch ap a) 
Nubes of Cotumns: [200 Cohan Wath 125 
(com Labois: Fie Names 
a C Page Tiles 
Options: Display Fes Mashed as Hidden 
T7 Display Dependent Fes 


(eo) owes | ve | 


@ Now select SiteMap Layout and name your 
homepage ‘search.asp’. You'll be told that this 
page doesn't exist. Accept UltraDev's invitation to 
create it for you and allow UltraDev to create a 
cache, which speeds up internal site navigation. 


8 | With a little luck, your screen will now look 
like this, and we're ready to have some fun. 
Fun in a relative sense, of course... 


9 | Firstly, double-click ‘search.asp' so you can 
start making some pages. We'll begin with 
some basic templates and gradually add more 

complex functions, including a search capability. 
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: Page templates 


For anything but the smallest one-page site, making a 
workable template is a must before you dive in with content... 
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Fig To start with, click Modify then Page 
fee Properties. Type in the name of your page, 
‘Search’, then select black as the background 


colour‘and white-as the text colour. Click OK. 


Fi Click on the bottom left cell and insert a four 
! row, one column table with no padding or 
spacing. This is for navigation. In the new table, 
insert rollovers for Search, Delete, Insert and 


Results. Use the graphics included on the cover CD, 


or devise your own. Make the link from each 
rollover go to an ASP page of the same name 


pag We have the basis for all our pages now. 

P One page, the Search page, doesn't require 
any ASP work, so we'll get it out the way now. In 
the bottom right cell, create a form from the Forms 
menu, then make a 100% table with four rows and 
two columns. Set the padding and spacing to three. 


Create a table, either by clicking on the table 
icon in the common toolbar, Insert>Table from 
the main menu, or Control+Alt+T. Make it 720 
pixels wide, with two rows and two columns, no 
border, and no padding or spacing. 


eee ee seus [Eire m_| Ppvew tr 


Move the central divider to the left, then 
insert a table into the top cell. Make it one 
row, two columns and 100% wide. Set the left cell 
to Align Left and Top in the Properties inspector 
(Control+F2) and the right cell to Align Top and 
Right. Then insert the graphics ‘images/CD 
banner.gif' in the left cell and ‘buttons/search 
up.gif’ in the right. That wasn't so bad, was it? 


Set the top left cell of the new table to be 
15% wide. Type ‘Artist’, ‘CD Title’ and ‘Genre’ 
down the left column. Add three text boxes in the 
right column. Name the text boxes ‘s_artist’, 
‘s_cdtitle’ and ‘s_genre’. Match these EXACTLY 
~ it's vitally important for our SQL statement later. 
Add a Submit button at the bottom. 


Select the two top table cells, right-click, 
enter table and click Merge Cells. 


ie 13 View Wee Noty 


Now we have something looking a bit more 

like it. Save the page three more times and 
rename it ‘delete.asp’, ‘insert.asp' and ‘results.asp’. 
Remember to change the top right graphic for each 
page, or you won't know which page you're on. 


Click in one of the cells, then move your cursor 

to the bottom of the screen. Select the text tag 
‘(form)’ which will select the form and bring up the 
form parameters in the properties box. Set your 
action to be ‘results.asp’, and the method ‘GET’. 
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: Get yourself connected... 


Now to the real meat of the task — connecting to a database, and making 
it all work together. This involves databases, so brace yourself... 


§ In the bottom-right cell, you should now 
@ create a table with three rows and four 
columns. Right-click and merge the top four cells 
together as before. In this row, type ‘We have 
found CDs which match your search criteria.’ In 
the row below type ‘Artist’, ‘CD Title’, ‘Genre’ 
and ‘Price’. Leave the bottom row blank. 


If we want the Web pages to show data from 

a database we need two things: a database 
(obviously) and a connection from the Web page to 
the database. Fortunately, U/traDev takes out most 
of the pain normally involved with database-driven 
Web work. Bring up your empty results page 


BE.) 


| Tac} Comecnan Protea | Ata | 


‘An CORE Syren dela tase ce risen about how to connect to 
‘Ne reicaed dete oowde. A Sytem dasa souce « witie lo af ves 
onthe rachire chssrg NT omc 


(ET aetna | | Le | 
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In the Define Connection box, type 
F ‘connComputerArts’. You can call your 
connection anything, but the ‘conn’ prefix is very Ce 
useful. To make the connection actually connect, 
you need a DSN or Data Source Name that links 
the Web pages and the database 


Name your newly created DSN. We suggest 
B ‘dsnComputerArts’. Again, you don't need the 
front extension, but it is useful. After you've typed 
this in, click the Select button to browse for your 
database (this is on the cover CD). 


Click the ODBC button and you'll get this very 
scary looking screen. In fact, it isn't that scary — 
simply click on the System DSN tab, and then Add 


connection name on it. In the DSN dropdown 
box, select the DSN name you just created. 


‘searih emer tac saincNC): Beane Maan 


Now the real fun starts. Go to Modify in the 
main menu bar and select Connections. 
You're now going to create a new connection, so 

click New. There's no need to worry about any 
connections that are already in the system; these 
relate to demos and you won't need them 


You now get another freaky list. This one has a 


list of all the compatible database types and 


data sources. Select ‘Driver do Microsoft Access 
* mdb’ - and then click Finish 


Click Test and you should see a screen like this. 

If you do, well done - you're connected! If 
not, go back and make sure you've followed the 
procedures exactly as written. Even the smallest 
of mistakes can throw things out of whack. 
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: The home straight 


You're not out of the-woods quite yet, but things get slightly easier 
now, as we finally link up.the database to the Web page... 


Sirens ven owen | ae. cmon Ws 


i Go to the Window menu and select Data 
=» Bindings.from the menu. The Inspector that 
pops up is UltraDev's powerhouse. Click the plus 
and select'Recordset (Query)'. A recordset is a 
temporary set of records that holds information 
fromthe database forthe Web pages to use. 


Type in the name of your recordset. Again, 

you can use anything, but you'll thank 
yourself for using an ‘rs’ prefix. We're using 
*rsComputerArts’. Now select the connection we 
made earlier in the connection dropdown 


gm if you click on F12 or preview the site at the 
e— moment, it looks great and works like a dream. 
All this is about to change. Click Edit Preferences 
and select Preview Using Live Data Server. This 

will now use the Personal Web Server to preview, 
meaning the database work shows great, but with 
no graphics - they only show on a remote server. 


You should now have the recordset you 
created in the Data Bindings Inspector. If you 
click on Server Behaviours, you'll also see it there 


Now select the entire row of data elements 

you've just dragged from the Data Bindings 
Inspector. Afterwards, click on the Server Behaviours 
tab (next to the Data Bindings tab). Click ‘+’ and 
select the Repeat Region option. 


BB | Birman nesneaer | Bite comet ns 


Check the ‘All records’ option and click OK. 
y This now lists as many of the database 
elements as there are in the database 
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Fw Make sure you're on Simple. If there's an 
@ Advanced button, you're in the right place; if 
not, click the button that reads Simple. The moment 
of truth... Click Test and you should see this screen. 


re 


eeenaees 


By this point, you're probably keen to finally 

see some interactive database-driven Web 
pages. Well, the time has come! In the Data 
Bindings Inspector, drag and drop ‘artist’ to the cell 
underneath the text ‘artist’ in the Web page. Do the 
same for the other headings. Drag ‘[total records] 
to between the ‘found’ and ‘CDs’ text — and 
suddenly it all begins to make sense! 


“Want to see it work on your Web page? Well, 

® do a Preview...Ugly as you like, but that's your 
Web page connecting live to a database. Now 
you're going to make it do some really useful stuff. 


dog@freeuk.com. Telephone: 01225 312327 
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Part 5: Going on a search 


Time to add a search function, which means digging even deeper 
into arcane languages such as SQL. Don't worry, it's not that hard... 


CO a 
a a aS 


Aad to SOL 


SELECT 
WHERE 
OROER BY 


2 | This isn't as bad as you might think. Carefully 
type the following statement into the SQL box, 
along with the variables. 


rer OesCe ae 
a ek ae eS L 


SELECT * 

FROM cdsupersearch 

WHERE artist Like ‘%' & ‘r_artist' & '%' AND cdtitle 
Like '%' & ‘r_cdtitle’ & ‘%' AND genre Like '%' & 
*r_genre’ & '%' AND price Like '%' & ‘r_price’ & ‘%' 


Now we want to make the search ‘engine’ Variables 

work with multiple search criteria. This means Name:- Value:- Run-Time Value:- 
some hefty, advanced SQL. Fortunately, we've r_artist % Request. QueryString(‘s_artist') 
done all the hard work for you in this tutorial. Click r_cdtitle % Request. QueryString(‘s_cdtitle’) 
on ‘recordset (rsResults)' in the Data Bindings rgenre % Request.QueryString('s_genre’) 
Inspector, and then click Advanced. rprice % Request. QueryString(‘s_price’) 


Ga You can view records by clicking on the Search 
button when all text boxes are empty. Not the 
most useful function, but it does enable you to see if 
the database is connecting and completely present. 


4 | Return to your search page and give the thing 
a whirl... At this point, you might want to 
double-check that you've typed in the SQL correctly 
and followed all the other steps 


The reason graphics don't show is that the 

Web page is previewed in a different folder to 
that in which the Personal Web Server is running. 
When the site is uploaded to its Web location, both 
folder and server technology are in the same place, 
so they suddenly appear, as you'd expect. Just 
make sure any server you upload to is ASP and 
Access compatible, though. 


Due to the limitations of space, you haven't 

been able to create an Insert and Delete 
Records page, but you can find these two pages, 
with the rest of the files, on the cover CD. Put them 
in the same directory as ‘search’ and ‘results’. 
There's an extension to this tutorial on the CD to 
help you create the final two pages 


3 | Click Test. If you get another screen full of 
results, you should be on the right track 
And this means typing everything in absolutely 
perfectly. We're using advanced SQL because the 
simple mode only provides one search filter, and 
we need three in this instance... 


Here, the search page is submitting to the 
results.asp page, which is filtering three 
database fields, and retrieving the right files. Insert 

‘OA into the artist search and ‘EF’ in the CD title 


Check the finished product at 

[w] www. futureit.net/computerarts .Now you 
have all the stages in place to create entirely 
database-driven sites. It's more to take in than most 
projects, but worth persevering for the extra 
functionality you can bring to your sites. EEE) 
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Transmedia Training 


Transmedia’s experts have taught some of the best in the 
industry: “We aim to reveal the heart of an application...” 


iam hatever their field of expertise, most 
f designers benefit from software training. 
/ Just ask staff at the BBC, Virgin Net, 

i Aardman and Channel 4, all of whom have 


attended courses run by Transmedia, the only training 
centre in the UK authorised by Macromedia, Adobe, 
Quark and FileMaker. 

Right now, Transmedia’s expertise is spread 
between two locations: Clifton, Bristol and Greenwich, 
London. The company was launched in 1990 by Nick 
Stockbridge: “I started running courses as a freelance 
trainer and my client base grew. Then, as the Internet 
exploded and clients demanded Web skills, we 
entered the new media market.” To cater for the 
growing demand, the team opened a Bristol office in 
1999. “Our first client was Real World, the music and 
multimedia company, started by Peter Gabriel. 
Business has since gone from strength to strength.” 

Transmedia’s main remit is simple: short, intensive 
training courses for industry pros in just about every 
app you can name within the realms of DTP design, 
multimedia, 3D and the Web. Arun Aulakh, who 
oversees client liaison and programmes, has worked to 
generate an environment based on production, 
avoiding that stereotypical IT classroom set-up. 

One of the company’s most popular courses has 
been in Dreamweaver, attended by professionals such 
as Paul Deane, Web Producer at Aardman. “I had good 
HTML skill,” he says, “but | needed a tool that would let 
me update the Aardman sites faster on a daily basis.” 
Transmedia’s Dreamweaver specialists have more than 
working knowledge of their subject, however. “One of 


our trainers wrote the original Dreamweaver 1.0 
training course notes, licensed worldwide by 
Macromedia,” says Nick. They've also utilised one of 
Dreamweaver's selling points, customising it to suit 
working styles. 

“We were commissioned by Deutsche Bank to write 
a Dreamweaver object to improve the navigation of its 
Intranet. Our senior trainer has also extended it via the 
Macromedia site, enabling Web pages to be displayed 
on WAP devices.” 

Alongside Aardman, Transmedia has been 
commissioned to work with staff at The Guardian and 
Observer. “We were appointed to help develop skills in 
creating photographic cut-outs and composites,” Nick 
explains. Another big name client was the BBC. A huge 
investor in Web technologies, the BBC’s Intranet has 
distributed information among thousands of its staff, 
and for three years Transmedia has been running 
customised courses on the techniques needed to post 
documents to the Web. 

And the future? “We're establishing our UltraDev 
courses as the best possible starting point to this new 
app,” says Nick. Transmedia’s Dreamweaver courses 
have been scheduled for the rest of this year, and it’s 
offering a free place on both a London and Bristol 
course to Computer Arts Special readers. To enter, 
email [e] artscompetition@transmedia.co.uk EI 
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Macromedia's Dreamweaver 3 


aking the most of tricky, which is where Computer Arts 
Dreamweaver's Special comes in. Courtesy of one of 
astonishingly flexible the most respected figures of the 
feature-set demands a cool Dreamweaver community, Garo Green, 
head — and plenty of imagination. The we've got 20 technique-honing tips to 
best sites are invariably simple to make your Dreamweaver experience 
navigate, fast and packed with the kind run like, well, a dream. 
of features clumsier rivals struggle to From defining and setting up your 
emulate. But getting that blend of own site to productivity shortcuts, 
technique and accessibility right can be there's something here even the more 


About Garo Green 


Who is Garo Green? 


The Director of Training at Lynda.com in Ojai, custom curriculum for software training, and 
California, Garo Green is well versed in has over five years’ teaching experience in 
Dreamweaver, Fireworks, Flash, Freehand, both hardware and software applications, as 
Photoshop, GoLive, and ImageReady.He has _wellas extensive knowledge of HTML, 


worked extensively in the development of computer graphics, and Web design. He is 


ZS9ZZEZZ0ZO :euoydeye] Woo esyidin@d :}ewy “edu ]NeY *YoHeASM)} 


20 top tips for 
___ Dreamweaver 


The ultimate Web-sculpting tricks and tips for 


experienced Web creator will find 
useful. Discover how to modify the 
Default.html rule, customise the 
Launcher, as well as turn text into 
tables, as well as synchronise your files 
at that virtual Beecher’s Brook. If you’ve 
got a germ of an idea itching to flourish, 
boot up your PC and try out some of 
these tips for yourself... you'll be 
amazed at how much you can do. 


also the co-author of the Dreamweaver 3 
HOT book (see page 80 for review), Learning 
Dreamweaver 3 CD-ROM, and Learning 
Fireworks 3 CD-ROM, all of which are 
bestsellers in their field. 
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Tip: This menu item will change 
based upon your last action. It 
will always start with Repeat 
and then end with whatever 
action you performed last. 
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Defining a Site 

In order to have access to all of the powerful 
site management features in Dreamweaver 3, 
you should define a site for each of your 
Website projects. By defining a site, you’re 
telling Dreamweaver that there's a folder on 
your computer that can hold your entire 
Website. Whether you're creating a site from 
scratch or importing one from another 
program, it’s all about properly defining your 
own Website. 


|. Open Dreamweaver. 


2. Select Site>New Site. This opens the Site 
Definition window if you don't have any sites 
defined yet. If you've already defined a site, 
you'll see the Define Sites dialog box, where 
you can click New. 


3. Enter a name for your site. This is an 
internal name, so call it whatever you want. 
Typically, this moniker reflects the Website or 
project you're working on. 


4. Click on the Browse for Folder icon (small 
folder) to locate the Local Root Folder. This is 
the folder that will contain everything for your 
Website. This folder can be empty, or contain 
a partial or completed Website. 


5. Puta tick in the Use Cache to Speed Link 
Updates box. This creates a small roadmap of 
your Website and make updates to links 
quicker. 


6. Click OK. When the Initial Site Cache 
dialog box appears, click OK again. 


7. Click Done. This closes the Define Sites 
dialog box. 


8. When the Site window opens, the Local site 
now displays an exact representation of the 
files and folders within the folder you defined 
as your Local Root Folder. 


Your flew Desktop 


Web design is one of the few mediums that 
require you to adhere to strict file and folder 
management. No longer can you simply add, 
delete, move, or rename files without giving it 
some thought. If you do, you’re likely to 
experience problems when you upload you 
site to a Web server. If you use Dreamweaver’s 
Site window to perform all of these tasks, your 
Web design career will be so much easier. 


Create a New File 


1. Select Site>Site Files View>New File 
(Mac) or File>New File (Windows), in the Site 
window, to create a new file right in your Local 
Root Folder. This ensures that your new file is 
saved in the appropriate place. 


Create a New Folder 


1. Select Site>Site Files View>New Folder 
(Mac) or File>New Folder (Windows), in the 
Site window, to create a new folder right in 
your Local Root Folder. This ensures that your 
folders are created inside the Local Root 
folder. 


Renaming Files/Folders 


1. Click on an HTML file, in the Site window, 
and select Site>Rename (Mac) or 
File>Rename (Windows). This makes the file 
name editable so you can change it. Rename 
the file and hit Return. 


2. If the file you're renaming has images or 
links, Dreamweaver prompts you to update 
the other files. Click Update. Dreamweaver 
now changes all the files that link to this file to 
ensure that no links are broken. 


Merging Cells with A Click 


Working with tables can be difficult and 
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tedious. And merging cells is something you'll 
do a lot when you're working with tables. 
Dreamweaver makes merging (COLSPAN and 
ROWSPAN) cells as simple as pressing a 
button. 


1. Insert a table by clicking the Insert Table 
object in the Common Objects palette. 


2. Click and drag to select the range of cells 
you want to merge. 


3. Press M (for Merge) to merge your 
selected cells. 


Don’t Restart - Reload! 


Like many Dreamweaver users, you’re 
probably constantly downloading and 
installing third-party extensions. However, to 
use many of these extensions you have to 
restart Dreamweaver, which can put a kink in 
your workflow. There's a little trick to help you 
avoid this restarting. 


1. After installing an extension that requires 
Dreamweaverto be reloaded, Option + Click 
(Mac) or Alt + Click (Windows) at the top of 
the Objects palette. 


2. Select Reload Extensions at the bottom of 
the dropdown list. This forces Dreamweaver 
to reload the extensions, without you having 

to restart the application. 


Updating Flash Links 
in Dreamweaver 


Adding Flash content to your HTML pages in 
Dreamweaver is a breeze. Many people don’t 
know that updating the links inside your Flash 
(.SWF) file is just as easy. No longer do you 
have to go back to Flash, update your links and 
re-export the Flash movie. Now you can do it 
all inside Dreamweaver. 


1. Insert your .SWF file into your 
Dreamweaver document using Insert Flash 
Object, in the Common Object palette. The 
-SWF file won't automatically play in your 
document window. Press F12 to preview it ina 
browser. 


2. Press F5 to open the Site window. 


Tip: Select Commands>Format 
Table to quickly format the table 
and contents. 


3. Change the name of the one of the HTML 
files that the .SWF file refers to. 


4. When the Update Files dialog box appears, 
click Update. Notice that you’re not only 
updating HTML pages, but the .SWF file as 
well. Sweet! 


Repeat Last Action 


To speed up repetitive tasks, like changing 
font faces, size, and/or colours, you can use 
the Repeat Last Action feature. 


1. Open a document with some text. 


2. Select some of the text and change the font 
to Verdana using the Properties Inspector. 


3. Select another section text. 


4. Select Edit>Repeat Apply Font. This 
repeats the last action you performed — in 
this case, changing the font to Verdana. 


Automatically Resize 
an Image 


Generally speaking, resizing an image in 
Dreamweaver isn't recommended. For the 
most part, you should only resize images 
using an image editor, like Fireworks. 
However, if you do accidentally resize an 
image in Dreamweaver, you can easily revert 
it back to its original size with just a few 
mouse clicks. 


1. Click on and image to select it. 


2. If either the W or the H settings, in the 
Property Inspector, are bold, the image isn't 
being displayed at its proper size. If they 
aren't bold, everything is fine. 


3. If you know the original and proper 


dimensions for the image, you can type them 
in the appropriate fields. However, the easiest 
way to return the settings and the image to 
their proper dimensions is to click on W and 
H. That's all there is to it. 


Frames Made Easy 


Creating Framesets can be difficult; knowing 
how to get started can even be a problem. 
Thankfully, Macromedia has added a new 
feature in Dreamweaver 3 which makes 
creating Framesets much easier, via the 
Frames Objects palette. Use them as they are 
or use them as a starting place to save you 
time. 


1. Open a new blank document in 
Dreamweaver. 


2. Click at the top of the Objects palette. From 
the dropdown menu, select Frames. This 
changes the Objects palette so that it 
displays a series of pre-made Framesets. 


3. Move your mouse over the Frameset you 
want to use. A small help tag appears, 
describing the Frameset configuration. The 
blue areas are relative areas; the other 
regions are set to exact pixel values. 


4. Click on the configuration you want to add 
to your page. Pow, instant Frameset! 


5. Select File>Save All to save all the files — 
and you're ready to go. 


Navigating with a 
Jump Menu 


Creating complex navigation systems can be 
tricky. Sometimes, you have too many options 
and not enough space. This is where Jump 
Menus — a Form object that enables you to 
select a link from a list - come to the rescue. 
Although not essential, they seem to work 
best in a Frameset environment, too, because 
you can cram loads of links into a small space. 


Difficult to create from scratch, they're easy 
to create in Dreamweaver. 


1. Open any Frameset. 


2. Click where you want to insert the jump 
menu. Most often this is where your other 
navigation elements reside. 


3. Click the top of the Objects palette and 
select Forms. 


4. Click the Insert Jump Menu object. This 
opens the Insert Jump Menu dialog box. 


5. In the Text: field, enter what you want to 
appear in the dropdown menu. 


6. Press Tab and enter the URL you want to 
open when this option is selected. 


7. From the Open URL In: dropdown menu, 
select the Frame you want the link to be 
loaded into. This is the target for the link. 


8. Click the + sign at the top to add another 
entry. 


9. Click OK when you're done. Dreamweaver 
adds all the necessary HTML tags and 
JavaScript. 


10. Press F12 to preview your Jump Menu in 
the default browsers. Slick, huh? 


Turn Text into Tables 


If you've ever wanted to get a spreadsheet 
online, you know how difficult that can be. 
Trying to save a spreadsheet as an HTML file 
doesn’t usually give good results. But now 
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Dreamweaver for extra layout 


control. 
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there's a solution: if you export your 
information as a delimited text file, you can 
bring that text file into Dreamweaver and it 
creates a table for it. Almost all database and 
spreadsheet applications let you export a file 
as delimited text. This feature, even if you use 
it just once, is worth its weight in gold. 


1. Open a new blank file in Dreamweaver. 


2. Click the Insert Tabular Data object in the 
Common Objects palette. This opens the 
Insert Tabular Data dialog box. 


3. Click the Browse button and locate the 
delimited text file you exported from your 
database or spreadsheet application. 


4. From the Delimiter dropdown menu, select 
how the file was delimited. Tab is the most 
common way to delimit files, although there 
are other ways. 


5. You can modify some of table settings 
below to fit your specific needs. 


Room # Name Bath Balcony Price 

1 Arts & Crafts Private No $125.00 
2 Classic Revival Private Yes $120.00 
3 Garden Room Private Yes $120.00 
4 Giant Oak Shared No $110.00 

5 Lovers Suite Private Yes $135.00 


6 Monterey Private Yes $120.00 
7 Mountain View Shared No $95.00 


Prete Format: (GES = Better Gawlty G)  seate: [00] 
SD create Navigation Page for Lach Prato 


6. Click OK. Dreamweaver automatically 
creates a table to hold the text file you 
imported. 


Inserting Fireworks 
Rollovers 


Macromedia Fireworks 3 enables you to do 
plenty of amazing things — like rollovers, for 
instance. In earlier versions, it was difficult to 
get your Fireworks rollovers into 
Dreamweaver. Not any more. Using the Insert 
Fireworks HTML object, you can insert them 
into Dreamweaver at the click of a button. 


1. Open the file into which you want to insert 
the Fireworks rollover. 


2. Click the Insert Fireworks HTML object in 
the Common Objects palette. This opens the 
Insert Fireworks HTML dialog box. 


3. Click the Browse button and locate the 
HTML file you exported from Fireworks 3. 
Make sure you select the HTML file, not the 
PNG and other image files. 


4. Click OK. Dreamweaver now copies all the 
HTML and JavaScript into your document. 
Press F12 to preview your rollover. Could it 
get any easier? 


Creating A Web Photo Album 


If you’re a graphic designer, photographer, or 
just someone who needs to get a lot of images 
online, you'll really like Dreamweaver’s 
Create Web Photo Album command. Getting a 
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folder of images prepared for online delivery 
can be laborious: you have to optimise, create 
thumbnails, export, bring the images 
separately into an HTML editor, and then 
create a contact sheet that links them all 
together. But with Dreamweaver, all you have 
to do is create a Web Photo Album. It’s a 
simple solution to an otherwise complex 
workflow problem. 


1. While in Dreamweaver, select 
Commands>Create Web Photo Album. This 
opens the Create Web Photo Album dialog 
box. 


2. Enter a title for your Web album in the Web 
Photo Album Title text field. The Subheading 
and Other Info text fields are optional. 


3. Click the Browse button for the Source 
Images Folder option and locate your folder of 
source images. These must be GIFs, JPEGs, 
TIFFs, PNGs, or PSD files. 


4. Click the Browse button for the Destination 
Folder option and locate an empty folder. This 
is where all the HTML and images created by 
this process are placed. 


5. Set a Thumbnail Size. 


6. Set the Columns option. This defines the 
number of images that appear across the 
page in your contact sheet. 


7. Click the Thumbnail Format dropdown 
menu and select your optimisation settings 
for your thumbnails. Use a lower quality 
setting here because the images are smaller 
than the original. 


8. Click the Photo Format dropdown menu 
and select your optimisation settings for your 
photos. Use a better quality setting here, you 
want the best quality you can get. 


Tip: If you want to insert the 
rollover one time only, click the 
Delete file after the insertion 
checkbox. This deletes the 
Fireworks HTML file after it's 
been imported into 
Dreamweaver. 
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10 items, 15.35 GB available 


9. Click OK. Dreamweaver now launches 
Fireworks 3, which batch-processes the 
images. The resulting thumbnails and photos 
are then sent back to Dreamweaver, which 
creates a contact page and individual photo 
pages, and links the elements together. 


10. In Dreamweaver, press F12 to preview your 
new Web Photo Album. 


Modifying the 
Default.html File 


Are you tired of always seeing a blank page 
when you select File>New? Wouldn't it be 
nice if you could modify the appearance and 
content of that file? Well, you can! A hidden 
file called default.html defines what page 
appears when you select File>New. Simply 
modify this specific HTML document and you 
can control the appearance of new blank 
documents. 


1. First, quit Dreamweaver. Now locate and 
open the Dreamweaver folder, the 
Configuration folder, and then the Templates 
folder. Double-click to open the Default.html 
file in Dreamweaver. 


2. Change the Page Properties of this file to 
reflect a colour scheme you like. Save and 
close this file. 


3. Select File>New. A new blank document, 
with the colour scheme you just defined, 
should appear. 


Modify the Objects palette 


Of all the tools in Dreamweaver, you'll 
probably use the Objects Palette the most 
often, mainly because this provides you with 
access to the most common objects you 
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might add to your Web pages. Neatly divided 
into six categories, the Objects Palette 
provides access to several different objects, 
without taking up much screen real estate. 


1. Exit Dreamweaver. 


2. Locate and open the Dreamweaver folder 
on your computer. Open the Configuration 
folder and locate the Objects folder. 


3. Open the Objects folder. Notice the six 
folders in here are the same as the categories 
available in the Objects palette. 


4. Create a new folder called Custom. You're 
going to copy some of Objects you use most 
often into this folder. This should help 
streamline your workflow. 


5. Open the Common folder and copy the 
table.htm, table.gif, and table.js files into the 
Custom folder you've just created. This adds 
the Insert Table object to your new Custom 
category in the Objects palette. 


6. Open Dreamweaver and create a new 
blank file. 


7. Click the top of the Objects palette. Notice 
that there’s now a Custom category. Select 
the Custom option. You should see one 
object, the Insert Table object. 


8. Click the Insert Table object to make sure it 
works. This is a good example of how easy it 
is to customise Dreamweaver to meet your 
individual needs. 


Customise the Launcher 


The Launcher and Mini-Launcher provide 
access to the different components with the 
click of a button. However, as you become 
more skilled in Dreamweaver, you might want 
access to only specific functions of the 
Launcher and Mini-Launcher. 


1. Select Edit>Preferences. Look through the 
different options you can control. 


2. Select the Floating Palettes category. This 
displays information about the various 
floating palettes in Dreamweaver, including 
the Launcher and Mini-Launcher. 


3. Under the Show in Launcher option, select 
the option you want to remove. Click the — 


symbol. This removes that option from the 
Launcher and Mini-Launcher. 


4. Click the + sign and select an option you 
want to add. The list displays all of the 
available options. 


5. Click OK. You should now see a new icon in 
both Launchers. 


Check Target Browsers 


To help avoid mind blowout, Dreamweaver 3 
has a feature that validates your code against 
the different browsers. This is something you 
should run on all of your pages before you 
post them to a Web server. 


1. Open an HTML file you want to test. 


2. Select File>Check Target Browsers. This 
opens the Check Target Browser dialog box. 


3. Select Microsoft Internet Explorer 2.0. 
Shift + Click on Netscape Navigator 4.0. This 
selects all of the browsers in the list. You can 
check one browser at a time if you prefer. 
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4. Click Check. Dreamweaver begins by 
checking all the code in your page. When it’s 
finished, it produces a valuable HTML report 
that identifies potential problems by browser. 


Setting Your FTP 
Preferences 


Dreamweaver comes complete with FTP 
capabilities, which means you don’t have to 
rely on another application to exchange files 
with the Web server. In fact, working with 
Dreamweaver's built-in FTPoptions gives you 
more control over your files than other FTP 
programs. 


1. Select Site>Define Sites. 
2. Select the Site you want to upload. 


3. Click the Edit button. This opens the Site 
Definition window. 


3. Select the Web Server Info category. 
Change the Server Access option to FTP. 


4. Enter your specific FTP settings. 


5. Click OK. Click Done when the Define 
Sites dialog box reappears. 


6. You now have access to the Connect button 
in the Site window. Click on this button to 
connect to your Web server. 


Clean Up Word HTML 


If you've ever wanted to get a spreadsheet 
online, you know how difficult that can be. 
Trying to save a spreadsheet as an HTML file 
doesn’t usually give good results. But now 
there's a solution: if you export your 
information as a delimited text file, you can 
bring that text file into Dreamweaver and it 
creates a table for it. 


1. Open a new blank file in Dreamweaver. 


2. Click the Insert Tabular Data object in the 


~ Common Objects palette. 


3. Click the Browse button and locate the 
delimited text file you exported from your 
database or spreadsheet application. 


4. From the Delimiter dropdown menu, select 
how the file was delimited. Tab is the most 
common way to delimit files, although there 
are other ways. 


5. You can modify some of table settings 
below to fit your specific needs. 


6. Click OK. Dreamweaver automatically 
creates a table to hold the text file you 
imported. 


Checking Links and Orphans 


Always check the links and orphan files in 
your site before publishing it to a Web server 
— to avoid uploading unnecessary or broken 
files. 


1. Open a site in Dreamweaver. 


2. Select>Site>Check Links Sitewide (Mac) 
or File>Check Links. (Windows) This opens 
the Link Checker dialog box. It defaults to 
checking for broken links. 


Files: 27 Total, SHTML, 13 Orphaoed 
‘Unks: 48 Total, 380K, 4 Broken, 6 External 


Ee) 


Files: 27 Total, SHTML, 13 Orphaned 
Links: 48 Total, 380K, 4 Broken, 6 External 
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3. Click Save to save this information ina text 
file. This is useful as a checklist to ensure all 
your broken links are fixed. 


4. From the Show: dropdown menu, select 
Orphaned Files. This displays a list of files in 
your Local Root Folder that aren't being used. 


5. Click Save to save this information in a text 
file. Use this later on as a checklist to ensure 
all your orphaned files are removed from your 
site. 


Synchronising Files 

Once you've uploaded your files to a Web 
server, what happens when you make 
updates? Enter, stage right, the Synchronize 
Files option! 


1. From the Site window, click the Connect 
button to connect to your Web server. You 
have to be connected to a Web server in 
order to access this feature. 


2. Select Site>Synchronize... 


3. From the Direction: menu, select Get and 
Put Newer Files. This ensures both you and 
the Web server have the most current files. 


4. Click OK. Dreamweaver compares the files 
on your computer with the files on the Web 
server. When it’s finished, it displays a list of 
files to be transferred. 


5. Untick the files you don't want to transfer, 
and click OK. Dreamweavertransfers files to 
and from the server until they're 
synchronised. GEE 
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Getting started 
with Fireworks 


tt may not be as powerful as Photoshop, but 
Fireworks has some impressive features to help 


ost people think of Fireworks 
as primarily a program for 


Web designers... 
creating graphics and 


iM 
{i optimising photographs for 


Web pages. It also has an extensive array 
of drawing tools, however, that we are 
going to put to use here creating a map. 
The map is going to have rollover buttons 
but they will be ‘disjointed’ rollovers, 


which means that when the mouse moves 
over a button another area of the image 
changes. We are also going to create a 
‘tweened’ animation which means that 
Fireworks creates all the intermediate 
steps for you. Then finally we are going to 
look at working more efficiently between 
Fireworks and Dreamweaver — the two 
packages which work so well together. 
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Part 1: Drawing the map 


We'll start by creating a simple example map using Fireworks’ 
drawing tools, which are pretty straightforward to use 


Placing groups of objects ‘on 
separate layers makes it easier to 
manage your.illustration — you 
‘can lock and hide layers you 
aren't using. 


If you feel confident try adjusting 
the’Bézier handles on the path 
using the sub-selection tool, 


; Make sure you create the lines in 
the middle of the roads. 


| MAF toe, rat q oo 


gS Open the file templatemap.png from the Map 
folder (part of the supplied files). In the Layers 
palette double click the Background layer, rename 
the layer ‘template’ and click OK, Then lock the 
layer by clicking the space to the right of the eye (a 
padlock should appear). 


4 | Once you have lines for all the roads, select all 
of them and go to Modify, Alter Path, Expand 
Stroke. Choose 10pts and leave the other settings 
the same. Click OK and the roads will have 
thickened out. Now you can add a fill and a stroke. 


Ber 
pis 
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Pencil tool. Select either and click and drag 
along the line of the river. Do half the river and stop 
- your hand will probably be decidedly wobbly by 
this point. 


Ls == 


ex Now you are ready to use the template to 
create the map. Start by double-clicking Layer 
1 and changing its name to ‘Roads’. Since the roads 


_are all straight lines it is easiest to use the Pen tool to 
create them so select the Pen tool. ie 


g Click at the left end of the High Street, click 
again at the junction with Rambleside Road 
and then double-click at the other end of the High 
Street to finish. You will have created a thin straight 
line. Continue this process to create the other roads, 
making sure they all overlap. : : 
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G The junctions of the roads have lines criss- 
crossing them which look ugly. They can be 
removed if the road is turned into one filled object. 
Select all the roads and go to Modify>Combine and 
choose Union. As long as all the roads overlapped 
you should now have one neat network of roads. 


6 | Now add another layer for the railway and 
river. The railway is simply one long line and 
like the roads you can create it with the Pen tool and 
then expand the Stroke. To create the curvy river 
you could use the Pen tool if you are confident at 
manipulating Bezier curves. 


8 | Start where you left off (don't worry that it 
doesn't join up) and drag, following the line of 
the rest of the river. Select one of the lines you have 
created with the sub-selection tool. There are lots of 
blue dots along the line following your jerky route 
along the river. 


g You can smooth the paths out by going to 
Modify>Alter Paths and Simplify. An amount 
of between 12 and 15 should remove most of the 
dots while leaving enough to create the basic shape. 
Then to join the two halves, select them both and 
go to Modify>Join. 
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- Now we se gies bit and create the graphics for the 


4 | You can do this cropping the images so that 
the untidy edges are removed. Go to the 
Cropping Tool and create a rectangle with the edges 
just inside the image. Then double-click to action 
the crop. 


7 The buttons are going to be rollovers which 
change colour and display an arrow pointing 
to the correct place on the map when the mouse 
moves over them. The first step is to create the 
rollovers. Go to Insert and select New Button. 


Ga Now you will make some buttons down the 
left side that will highlight places on the map 
when the viewer moves the mouse over them. First 
you need to create some space for them so go to 
Modify and Canvas Size. 


8 | In the dialog box that pops up, draw a 
rectangle and fill it with the same colour as the 
background. Then type the text ‘Police Station’ on 
top. Click the Over tab at the top and click the Copy 
Up Graphic button (bottom right). 


a” Add 150 pee to the width and click a right- 
hand button in the grid so the pixels are added 
on the left. Now there is space to add the buttons. 
Select the background of your map (you may have 
to unlock a layer) and extend it using Ctrl-T so it fills 
the extra space. 


9 | The text and rectangle will appear. Double- 
click the text and change the colour. When you 
click OK on the text dialog box a message will 
appear asking if you want to update the other 
button states — click No. Then close the box and 
position your button. 


Part 3: Creating rollovers, part 2 


With all the graphics created, making the 
rollovers work is simplicity itself 


Repeat this process to create the other 
buttons: Post Office, Car Park, Hospital, Now you can set up the arrows to point to 


Station and Bus Station. Place your buttons each place when the mouse moves over the 
‘ina line down the left side of the page and go to button. In the Layers palette double-click each layer 
a My, Align, Left and then Modify, Align, and tick the Share Across Frames box and then lock 
Distribute Heights to make sure they're even. each layer. Create a new layer for the arrows. 


G Add a new frame. Make sure you are on the 


4 | In the Frames palette add a new frame and 5 | Select both, use the Align command to centre Arrow layer and paste in the arrow, positioning 
select the Polygon tool, making it three sides in them and then choose Modify>Combine and it for the next button. Then add the slice as you did 
the Options palette. Hold down the Shift key and Union. Copy it so you can use it again and then in the previous step. Continue doing this until you 
draw a triangle. Then create the shaft of the arrow place it pointing to the appropriate place for your have arrows on separate frames for each button. 
from a rectangle. top button. Use the Slice tool to draw a rectangular 


slice that covers it. 


- : : - : - It's time to preview your work in the Browser 
a’ Now you need to set up a ‘swap image’ so that 8 | In the Behaviours palette click the + button so press F12 and check everything is working. 


when the viewer moves the mouse over the and choose ‘Swap image’. In the dialog box Then save the file, Optimise and Export it, making 
button the arrow appears. Go back to Frame 1 and that appears is a diagram of all your slices. Select the sure you select Use Slice Objects and Dreamweaver 
select the first button (you will need to unlock the __« slice that’s over the arrow you want to be displayed 3 HTML. Call it ‘fireworksmap' and save it in the 
buttons layer). and choose its frame number before clicking OK. Map folder. 
Repeat this for the other buttons. 
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Part 4: Working between Dreamweaver and Fireworks 


The two programs are designed to work together, 


it makes sense to take advantage of this 
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Use this map to find your way ecozrd Anytown We welcome you 
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‘When you click OK the sliced images are 
and reconstructed in an HTML table. . 


EB pase of wee gogo cote 
animated title, so go back into Fireworks and 
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HTML 
Fireworks. 


Find your way around Anytown 


4 | You are going to make a tweened animation 
of an arrow that will move across underneath 
the title. Create a new layer and make an arrow, or 
copy it from ‘fireworksmap’, and with it selected 
choose Insert>Convert to Symbol. Name it Arrow 
and make sure ‘Graphic’ is checked. 


Use this map to find your way around Anytown. 


welcome you to our town and hope you have 


Fa insert the title file into Dreamweaver above the 
map. Now if you imagine you want to change 
it, right-click on the image and select Edit with 
Fireworks 3.0. The original of the file will open in 
Fireworks. Now we're going to change the colour of 
the arrow. 


"HTML file 


5 | Now the arrow is an ‘instance’ and appears 
with an arrow in the bottom left corner. Copy 
it and paste another one onto your canvas. Place 
one arrow on the left edge and the other at the right 
and select them both. Go to Modify and select 
Symbol>Tween Instances. 


o"™ In the Library, double-click the preview of the 
arrow and a window opens for you to edit the 
symbol. Change its colour and close the window. 
Under the File menu select Update. Fireworks will 
save the PNG file and export it again to create the 
animated GIF. 


yt ‘Find way 
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G Make sure the Distribute to Frames box is 
ticked and click OK. Play your animation by 
clicking the Play button in the bottom right corner 
of the screen. To make the text visible on all the 
frames select ‘Share the Layer across all frames’. 
Then save the file and export it as an Animated GIF, 
calling it ‘title’. 


g Return to Dreamweaver and you'll find the file 
has been updated. You won't be able to do this 
with the map because the image has been sliced. If 
you want to update it you will need to delete it from 
the Web page and re-insert the updated file. FEE) 
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Templates and style sheets 


Dreamweaver's templates and style sheets are the easiest way to keep 
your Website consistent — and they're a cinch to use, too 


efore you know where you 
| are, your Website expands 
hugely and it becomes a 
f massive job to keep track of 
allthe pages and make sure your design 
is consistent on all the pages. That's 
exactly why Dreamweaver incorporates 
templates and style sheets — they're 
designed to make your life much easier. 
By using them you can virtually 


guarantee that consistency is maintained. 


As you would expect Dreamweaver's 
templates enable you to create a basic 
layout that you can use as a starting point 


for new pages. Elements you add to the 
template will appear in place on any new 
pages you create from the template. 


When the time comes to update your site, 


change the logo, add new contact details, 
revamp the colour scheme and so on, you 
can change the templates you have used 
and the pages built from the templates 
will automatically be updated. 

You can also use templates to control 
which parts of a page can be altered and 
which are locked. When you first create a 
template the default is to allow nothing 
on the page to be changed. In other 


words, the whole page is locked. Then 
you decide which parts of the page you 
will need to change and set those up as 
‘editable’ regions and selections on the 
template. Elements that are the same on 
all the pages created from the template 
remain locked so they can't be 
accidentally moved when you add the 
content to the page. It means you can set 
up the pages to make it simple to add text 
and images to the pages without ruining 
the page in any way. 

The templates take care of your layout. 
Style sheets, meanwhile, take care of 


your text formatting, making sure your 
heading styles are consistent and 
captions remain italic throughout (if, for 
example, that’s what you have decided). 

There are two kinds of style sheets you 
can create and use in Dreamweaver: 
HTML styles and CSS style sheets. 
HTML styles enable you to create styles 
based on the standard HTML tags. Each 
style is defined by the set of formats it 
contains. So one HTML style could make 
the text size 6pt, bold, centred and using 
the Arial font group, while another might 
make the text size 3pt, plain, ranged left, 
using the Helvetica font group. 

Once the styles are set up it’s just a 
matter of selecting the text and clicking 
the appropriate style to add the 
formatting you want. The one drawback 
HTML styles has is that when you change 
the style, the text already using that style 
won't be updated. 


With CSS style sheets, on the other 
hand, updating formatting in pages which 
already have a style applied is possible. 
In addition CSS style sheets are a Web 
designer’s dream. They actually allow you 
some control over type — you can change 
the line spacing, add space between 
letters and even justify text. The 
drawback is that most of the CSS style 
sheet settings can only be displayed in 
version 4.0 browsers and later, and even 
then the extent to which browsers vary. 

CSS style sheets can be set up in two 
ways in Dreamweaver. You can either 
create a CSS style sheet that is 
incorporated into a single HTML page, or 
one that several HTML pages link to and 
use. The latter is useful since it means 
you can create a set of styles for different 
sections of your site, and when you 
update them you are updating several 
pages at atime. 
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Part 1: Laying out your page 
Laying out your page and establishing the styles for your type 
s the Este in v thie process — and an often overlooked one 


This style will apply to entire paragraphs rather 
than selected text, so select the ‘Paragraph’ 


a 8 7 a a ‘en 


4 | Start by creating a new HTML style for the radio button. If a style has already been applied to 
‘Heading’, so click the New button at the Heading text, we want to clear it before applying 
bottom of the palette and type in ‘Heading’ as the the style we are creating, so check the ‘Clear 
name at the top of the dialog box. existing style’ radio button. 


Now create the other HTML styles — for the 8 | Before you create the template, return to 
Paragraph, Special Offer text and Contact Modify and Page Properties and remove the 
details. Notice there is already a Caption style, but it tracing image (just delete the path pointing to it). 
won't have the formatting we want. To change the Then go to File and choose ‘Save as template’. Type 
style, double click ‘Caption’ style in the palette and in aname and Dreamweaver will create a Templates 
change the attributes in the dialog box. folder in your site folder where it will be stored. 
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6 | The Heading style needs to be size 4, colour 
#003300 using the Verdana font and Bold, 
Select the attributes in the ‘Define HTML Style’ 
dialog box and click OK. Your new style will appear 
in the palette. 


9 | Try creating a new file from the template — go 
to File and choose ‘New from template’. A 
message appears telling you that you won't be able 
to change anything on the page because there are 
no editable regions — you have to define the areas of 
a template you want to be ‘editable’. 
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Part 2: Working with your template 


Preparing a template and using it to create Web pages comes next. This 
isn't difficult, but sometimes requires quite a bit of thought to get it right 


Safety measures 

By using templates you can easily 

teach people to update Web 

pages without worrying about the 

Possibility of them accidentally 

changing the layout. 

Text editing Fasc enistanaicapenacase 
Notice that when you ae a 1020990888666 or emad bobdaysdtbokdoysinsun 
selection editable the text that 

can be changed is highlighted, 

but there are no curly brackets. 

‘ 8 Select the cell and text of ‘Image1' and go to 
apes Modify>Templates and choose ‘New Editable 
= - Region’. Name the region ‘image1’ and click OK. 

a Gaon the template if you diosa it. In this Curly brackets appear round the text and it is 
example, the logo, buttons and rule across the —_ highlighted. Now when you create a file from this 
top of the page won't change, but you will need to template you will be able to add images or text to 
add images and text to the cells as indicated. that table cell. 
ny rh rat 
at Bhi Apes 


ot Garber formate 
1020390886666 or amal holban 


Zz Highlight t the contact name in the Contact 
details, go to Modify>Templates and choose 
‘Make selection editable’. Give it a name as you did 
for the others. By making only the selection 
editable, it means only the contact name can be 
changed, and none of the other text. 


a: Save the template again and close it. Choose 
New File from Template from the File menu. 
Select your template, click OK and save the file as 
‘index.htm’. Open the file ‘layout instructions’ 
which contains text for you to copy into index.htm 
and instructions on where to place the images. 
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a Open the template and aaa the logo 
‘Holidays in the Sun’ with the file 
‘newlogo.gif'. Save the template and a dialog box 
appears saying that Dreamweaver will update all the 
files created from the template. A ‘log’ comes up 
once it has finished. 


8 | Re-open the file ‘index.htm’. The logo should 
have changed. Imagine if you had created a 
hundred Web pages from this template. To update 
the logo you would just have to update the 
template file and Dreamweaver will do the rest. 
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Q Now create editable regions for the cells of 
containing the other image, the Latest Deals 
image, the Heading and body text, the Special Offer 
image and text and both Captions, giving each one 
an appropriate name. For the Contact details we 
only want to change the contact name. 


6 | Once you have copied all the text to 
index.htm, select the heading ‘Cairo -7 
days...’ and click on the ‘Heading’ style in the HTML 
style palette. Then select the paragraph of text 
underneath and apply the ‘Paragraph’ style. Apply 
the appropriate styles to the rest of the text and 
resave the file. 


a You can change the HTML ides without 
changing the template. In index.htm double 
click the style ‘Paragraph’ and change the colour to 
#FF6600. When you click OK, none of the text you 
had applied the Paragraph style to has changed. You 
have to reapply the Paragraph style to change it. 
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Part 3: Creating CSS style sheets 


CSS style sheets can.be more versatile and flexible, at the 
* “expense ¢ of some incompatibility with certain browsers... 
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a A dialog box appears for you to define the 5 | To add another style click ‘Open style sheet' at 6 | Once you have clicked OK and saved, notice 
style attributes. This style is to be applied to the bottom of the palette and then double- nothing new appears in the CSS Style sheets 
text, so choose some type and block attributes click cssstylesheet.css in the dialog box. You add palette. Select the first paragraph of text and choose 
appropriate for a heading. Then click OK, Save and another style sheet by clicking ‘New’. This time Heading 3 from the Properties palette. The text 
Done. Select the first heading and click on the style redefine the HTML tag ‘H3’ by selecting it from the changes to reflect the attributes you chose for the 

in the palette. drop-down list and choosing the new attributes. H3 style. 


For tare edomaution contact Francesca on Zia 
DOSSOSBEEEE or emad bobdayed@ichdayemrn ce he 


@ Now you can apply the same style sheet to 
another HTML file. Open the file 


9 | Wher you click ‘Done’ ar ly text that has bee 
csssty le2.htm’ and in the CSS styles alette click the o change the style sheet, click the Oper style 
Pp 


defined by the styles you have changed will be 


Open Style sheet button to link to the sheet’ button in the palette in either file, updated — not only in the file you have open, but in 
‘cssstylesheet.css’ file. Then you can apply the highlight the .css file listed and click Edit. The styles any files using those .css styles. That's the big 
Heading style to headings and the H3 style to that have been defined are displayed and you can advantage of using CSS styles rather than HTML 
paragraphs of text. edit each of them. styles. 
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SPACE BAR 
TO LAUNCH 
BALL 


ARROW 
KEYS TO 


MOVE BAT 


P’ TO 
PAUSE 


S$’ TO TURN 
SOUND 
ON/ OFF 


ESC’ TO 
Quit 


1. Clockworx created this screensaver for Boddingtons, a 
company well aware of the value of branding. The bat and ball 
are used to smash into and ultimately destroy images 
associated with the brand. [w] www.whitbread.co.uk 


2. The latest Thorntons homepage has areas for the company 
to adapt to offers and promotions, with constantly changing 
chocolate and confectionery images. Thorntons has also 
recently branched out into interactive digital TV via the Sky 
Open... service; the limited resolution and real estate of a TV 
screen obviously demands a simpler and bolder design, as is 
evident in these examples of the site. [w] www.thorntons.co.uk 
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Clockworx 


Mastering the tools is half the job — design nous is the other 
half. But how do you design for success? Ask Clockwort... 


r= aking a client happy and helping a client on 
( the road to success are two different things 
: in the world of Web design. A client might 

4i see a Website jammed with jumping logos 


and animations, and be impressed and happy. But if 
this moving medley of Web trickery is supposed to sell 
fridge freezers or microwave ovens, then the site is 
unlikely to be successful. And if the site isn't 
successful, then the client isn’t successful. Eventually, 
of course, the client will be unhappy. 

One of the UK’s most successful Web design 
companies, Staffordshire-based Clockworx, 
understands this difference implicitly — always 
designing for the long rather than the short-term. When 
asked to explain his company’s success, Clockworx 
founder and MD, Robin Edwards, doesn't just tell us that 
Clockworx clients are happy; he tells us why they're 
happy — and how to keep them that way... 


The customer’s customer 


“We have great people doing the things they do best 
and happy clients who'll gladly provide glowing 
references,” he says. “The reason the clients are happy 
is that we're entirely focused on bringing success for 
them, which naturally leads to success for us.” 

This two-level approach to work, designing a site not 
just for the client but for the client’s customers, lies at 
the heart of Clockworx’s philosophy. “Absolutely,” 
agrees Robin. “Our clients know that the solution we 
provide is not aimed at them, it is aimed at their 


chocolate 


floating candles C 


scented 


1 720g C 
2 455g ( 
3 Vanille 
4 


customers.” It seems such a simple attitude, but it’s 
easy to lose sight of the fact that keeping the customer 
satisfied is more about keeping the customer's 
customer satisfied. It’s important to know what the 
client wants to achieve with their Website and build 
from there. Robin points out that often the only thing 
that clients know is that they want a Website. 

Even the most inexperienced Web design company 
can deliver a site and meet that barest of objectives. 
For a design company to really prosper, however, it 
needs to gently shake the real, underlying objectives 
out of the client at the planning stage. It takes work to 
craft a site that has purpose and intention. Clockworx 
ensures that clear objectives are set in the client's brief 
or through strategic consultancy, undertaken by 
Clockworx itself. 

“We like to get them to think about why they need a 
Website,” Robin tells us. “What problems are they 
trying to solve? Only then can we decide what's the 
best solution, be it a Website, digital TV, e-commerce 
or other related technology.” 

These objectives are, in effect, the fundamental 
reason for a site’s existence. Once they've been set, it's 
vital not to lose sight of them and to make sure, says 
Robin, that Clockworx works towards achieving them. 
This takes something of an iron will on the part of the 
designers. “If something crops up that seems like a 
distraction, or unnecessary gimmick, we suggest that it 
isn't included,” says Robin diplomatically. 

This could be tricky if a client is particularly 
stubborn, but Robin hasn't had much trouble in the 
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3. Two screens from the Thorntons Discovery site. This was 

the first Internet venture by the company in February 1998 — a 
children’s site aimed to link a new dinosaur range of chocolates 
with educational information, games and puzzles. Its success 
led Thorntons to launch an online store, which further developed 
into its current e-commerce site. [w] www.thorntons.co.uk 


4. Luggage Express is a leading luggage retailer stocking well- 
known brands, and has recently extended its Airport shops to a 
presence on the BAA site. Again, the design is fairly simple, 
presenting the products and information without too much 
extraneous gumph. [w] www.luggage-express.co.uk 


5. Mercadium is the home page of a trading hub for the 
construction industry — available in a variety of languages to 
represent its European offices. Not of all Clockworx's clients 
are glitz and glamour... [w] www.mercadium.co.uk 


6. Classic Selection is a leading mail-order fashion retailer 
featuring designer brands, aimed at mature women. Part of the 
brief here was to make the site accessible, easy to use, and 
most importantly easy to order from, given the relatively non- 
technical nature of the target audience. 

[w] www.classicselection.co.uk 


7. Orchard Nurseries extended its successful mail order 
business to an online service, and were “pleasantly surprised” 
at the number of orders it received after launch. The site is for 
gardeners of all levels. [w] www.orchard-nurseries.co.uk 


. 
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pig-headed customer department. “Clients usually 
respect our integrity on this — they treat us more like a 
business partner than a supplier, which is rewarding for 
all of us,” he is happy to say. 

This could be something to do with Clockworx’s 
sparkly track record. It’s managed to avoid creating 
vacuous sites that are all bells-and-whistles with 
nothing of value inside, and the company’s roster of A- 
list clients shows it must be doing something right. 

Since Robin founded the company in 1995, 
Clockworx has conceived and created sites for, among 
others, BT, J&B Rare Scotch Whisky, Thorntons 
Chocolates, Thorntons Interactive TV, The Body Shop, 
Barnardos, and Luggage Express. It’s a diverse line-up, 
but the sites have all thrived because they've each met 
their customers’ needs effectively. 

During our Q&A session, Robin doesn't boast ina 
flashy manner about Clockworx being innovative, or 
highly creative, or experts in cutting-edge technology. 
He doesn't need to; Clockwork is all these things. 
Instead, he’s keenly focused on making a site work for 
the people who have to use it. It’s what top-end killer 
Web design is all about. 

Ask Edwards to name one thing that a Web design 
company should never do and his reply is quick and to 
the point: “Never ignore the likely demographic profile 
of its audience and make the site inaccessible to them. 
It’s like opening a shop for tall people and making a 
door three feet high.” 

Ask him to name one thing a Web design company 
should always do and he continues in the same vein: 
“Web design companies should always question the 
decisions of the client if they feel strongly that it will 
affect the chances of reaching their objectives.” 


A stiff challenge 


Of course, Clockworx is able to live its philosophy 
because the company knows a thing or two about 
building sites. Equipped with an impressive arsenal of 
Web technical knowledge, Clockworx can meet the 
needs of a diverse range of clients. It’s done a great job 


building stylish e-commerce sites that are fast and 
functional, among them Luggage Express and 
Thorntons. The company has also gone hell-for-leather 
and let its hair down for intense creative projects such 
as the J&B Rare Scotch Whisky Website and 
Boddingtons screensaver. 

The J&B site was a particular high point for 
Clockworx. It beat competition from around the world 
to scoop the Grand Prize for Interactive Media at the 
1998 London International Advertising Awards. The site 
also snagged a win in the Beverages category at the 
same event. It was the just reward for a huge creative 
undertaking that took the company seven months to 
complete from the date of appointment. 

The brief, says Robin, was “to put together a site that 
would appeal to J&B’s target audience of younger 
Scotch drinkers and immerse them in the J&B 
experience.” The result was a full-on slice of Web- 
building magic that incorporated Shockwave, Flash, 
and database technology to create a competition of two 
parts where each part ran for six months. Visitors had 
to complete a set of J&B related challenges, updated 
every few weeks, that would eventually enable them to 
enter the Final Challenge — a mind-bending set of 
taxing puzzles. 

“Technically the site was tricky to put together, being 
mostly database-driven, but the challenge to us as a 
team was to keep coming up with ideas for great games 
and puzzles while ensuring they were entirely relevant 
to the J&B Rare Scotch Whisky brand,” remembers 
Robin. Creating most of this content from scratch was 
time-consuming and challenging, but it showed that 
Clockworx could think imaginatively and handle big- 
league entertainment projects. 

“Entertainment-based sites are clearly great fun and 
enable the designers to really let their minds run free,” 
explains Robin, but that doesn't mean the lower profile 
e-commerce sites don't offer their own rewards... 
“When the orders start flooding in to an e-commerce 
site, and the client starts making a profit and their 
customers are happy, that can be equally rewarding 
and spurs you on to tweak things further for even better 
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Other related products 


Welcome to Luggage Express 
BAA's chosen On Line Luggage retailer. 


RUCKSACKS At Luggage Express we are fully committed 
SOFT SIDED LUGGAGE _¢® Offering the consumer quality products, 

- Rest assured that all goods are covered by 
full manufacturers’ guarantees. Our prices ». 
KIDS GEAR are competitive and the service we offer is 
second to none. 


Happy Shopping! 
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SELECTION 


autumn preview 


SHOPPING FOR LEADING BRANDS FROM THE COMFORT OF YOUR HOME 


home @ howtoshop @ search @ information @ contactus @ request a catalogue 


Our Autumn Preview 


Eveningwear 
Coats & Outerwear 
Suits & Outfits 
Knitwear 

Oresses 

Blouses & Tops 
Trousers 


results. Analysing the success of your work is 
important if you're to keep on improving.” 


Welcome to the preview of our Autumn 
Collection, an exciting advance look at 
some of the highlights of the new 
season. 


This preview gives you an opportunity to 
shop from the collection prior to its 
official launch in September. 


Please note that Autumn Preview 


purchases will not be despatched 
until the end of August 2000. 


‘Search for the latest styles 


from your favourite designer 
v 


or search by keyword 


Mercadium = —ontine library 


Mercadium 


The neutral trading hub for the Construction sector in Europe 
By the Industry, For the Industry 


Eveningwear 
Jackets & Coats 
Suits & Outfits 
Knitwear 

Dresses 

Blouses 

Trousers 

Shoes & Accessories 
Leisurewear 
Skirts 

Nightwear 

Soft Co-ordinates 


win £250 
worth of clothes 


Sa 


Mercadium 
special deats 


OVERSHIRT 


Graduating from navy to soft yellow, 
Erfo's lightweight overshirt has a 
concealed placket revealing two-top 
buttons. With buttoned cuffs and side 
slits. It measures 73cm (29°) long and is 
machine washable. 100% polyester 


Perfect partners 


Click on an image to see more detail 


JERSEY TROUSERS 


Offering comfort for 
everyday, these 
navy wool-blend 
jersey trousers have 
a fully elasticated 
waistband, stitched 
front seams and 
side pockets, Ina 
choice of two 


Interactive and beyond home 


To this end, Clockworx now offers an e-commerce 
solution called Shopworx [w] www.shopworx.com, 
which goes hand-in-hand with the company's Web 
design activities to create effective retail sites that still 
look great. Versatility and flexibility is the future for 
Clockworx. With the growth of the Net on TV and 
portable devices, Edwards is looking forward to 
delivering more multi-platform solutions for clients. 
Clockworx has already developed an interactive 
service for chocolate specialists, Thorntons... 

Sounding old and wise, Robin predicts that 
“completely unmetered network access, if it ever 
arrives globally, will have an even bigger impact on 
design than we can imagine.’ Until then, he says, 
Clockworx will strive for bigger and better things, 
while keeping Clockworx “a fun place to work.” 

And maybe that's the real secret of success. 
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Macromedia Exchange 


Using Macromedia's extension-packed Web forum enables 
you to infinitely extend Dreamweaver's creative potential... 


he Macromedia Exchange for 
Dreamweaver is a site where 
developers can share their 

| extension creations with the rest 
of the Dreamweaver community. Here you'll 
find hundreds of free extensions that can help 
you build new features into your Website. To 


take full advantage of this facility, you'll need 
to download and install the Macromedia 
Extension Manager, a free app which installs, 
manages and removes extensions for you. 
Over the next few pages, you'll learn all 
about Macromedia Exchange for 
Dreamweaver, learn about the Extension 


Manager, and discover some of the cool 
extensions available. There's even a guide to 
improving workflow by creating your own 
custom Object using the Object Creator. This 
can really help you work more efficiently in 
Dreamweaver. Best of all, it requires no 
programming experience. 


Part 1: Macromedia Exchange for Dreamweaver 


This is the nerve centre for finding extensions on the Internet, so it's handy to learn how to use it... 


macromedia’ 


Dreamweaver special 


aS You can reach the Macromedia Exchange for 
Dreamweaver by pointing your browser at 
www.macromedia.com/software/dreamweaver/. 
This opens the Dreamweaver page. Now click on 
the Exchange link to access the page for the 
Macromedia Exchange for Dreamweaver... 


4) Once you've signed in properly, scroll down 
the page to see the Featured Extensions 
section. This section of the Macromedia Exchange 
for Dreamweaver showcases new and cool 
extensions. Check this section often. It almost 
always has something worth downloading. 


2 If this is your first visit, you need to create a 
Macromedia ID. If you already have an !D, 
go to the next step; otherwise, click the ‘Get a 


Macromedia ID' link. This opens a page with a form 


requesting some personal information. Fill this in 
and click Continue to obtain your own ID, and log 
into the Macromedia Exchange for Dreamweaver. 


You can browse for extensions by category if 

you like. This is helpful if you're looking for a 
specific type of extension — say, for one that works 
with Fireworks. Click the Browse Extensions drop- 
down menu at the top, and select a category that 


interests you. This then takes you to a page that lists 
all the available extensions for that category. As the 


Macromedia Exchange for Dreamweaver is always 
expanding, this can save you a lot of time. 


Each extension page has a dedicated area for 

discussing its use. The Discuss feature enables 
you to get help from the author and share feedback 
about the extension. You can post and review 
messages from within your browser. 


In addition to a discussion area for each 

extension, there's also an area to review the 
extensions. This enables everyone who downloads 
these files an opportunity to post a review about its 
integrity, usefulness and so on. You can also assign 
the extension a rating of one to five here. 


lf you already have a Macromedia ID, fill in the 


3 | information in the Exchange Login section to 
sign in. You only have to do this once. Next time 
you visit, your browser will remember your ID and 
password. This is only true if you're using the same 
browser you signed up with. If you use a different 
browser, you will have to sign in manually again. 


Once you've located an extension that 

interests you, click on its link to jump to the 
page describing that specific extension. Here you'll 
find a Macintosh link and Windows link. Click on 
the appropriate link to download the extension to 
your computer. The file you download has a .mxp 
file extension. All extensions you download should 
display this same file extension. 


In addition to numerous user reviews, there's 

an official approval system for each extension. 
All extensions go through a “basic” test for 
installation. If an extension behaves in a way that 
you'd expect and has a familiar user interface, it 
may become an approved extension and display the 
“Macromedia Approved" icon. 


Part 2: Macromedia Extension Manager 


The Extension Manager is a free add-on that enables 
you to access all those extensions on the Exchange... 


Perce RENE T 6 2) we 


o a 
a Before you can install any extensions, you 

must download the Macromedia Extension 
Manager. This handy little program enables you to 
install, manage and remove extensions quickly and 
painlessly. Click the Extension Manager download 
page link when you get to the Macromedia 
Exchange for Dreamweaver. 


Commands 
Start Recording 
Play Recorded Command 
Edit Command List... 


Get More Commands... 


Manage Extensions 

Clean Up HTML... 

Clean Up Word HTML... 
Add/Remove Netscape Resize Fix... 
Optimize Image in Fireworks... 
Create Web Photo Album 

Apply Source Formatting 


format Table... 
Sort Table... 


Set Color Scheme... 


g Confirm that the Extension Manager has been 
installed properly by launching Dreamweaver 
and selecting the Commands menu. If you see the 
Manage Extensions option, the Extension Manager 
has been installed properly. You're now ready to 
install the extensions you download from the 
Macromedia Exchange for Dreamweaver. 


2 | Click the appropriate link to download the 
Extension Manager. (There are separate files 
for Macintosh and Windows platforms), and then 
save the file onto your hard disk. 


Extension Manager 


Product: [Dreamweaver pall 


5 | Select Manage Extensions to launch the 
Extension Manager. First off, the window 
will be empty because you haven't installed any 
extensions yet. However, as you add and remove 
extensions, they'll be listed in this window, 
alongside Version, Type, and Author information. 


2 = ommeneiemeiannelidate s 
Once you get to the Macromedia Exchange 
for Dreamweaver, type “bullet” in the 
search extensions text box and hit Return/Enter. 
This automatically searches through the entire site 

for all extensions that deal with bullets. 
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Id 


the Bullet Bui 


by Joseph Lowery, which you may find useful. It 


enables you to create custom bullet graphics while 
inside Dreamweaver. Click the appropriate 
download link and save it to your hard disk. 


8 | Click ler link that appears in the 
search results. This is a neat extension, written 


e 


macromed 
EXTENSION MANAGER 
macromnediee 
sires 


g Quit Dreamweaver before you install the 
Extension Manager, then double-click on the 
Extension Manager installer. You can install this 
program into any directory you want on your hard 
disk; you don't have to install it into the same 
directory as Dreamweaver itself. 


File 
Install Extension... 0 
Remove Extension #- 


Go To Macromedia Exchange 3G 


Quit 98Q 


G Time to grab those extensions. Select File>Go 
to Macromedia Exchange. This automatically 
Jaunches a Web browser and takes you to the 
Macromedia Exchange for Dreamweaver. 


= Extension Manager > 


Product: | Dreamweaver ¢ 
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|3)  BalletBoiider Joseph Lovery 


BulletBuilder converts the bullets of an unordered list to a graphic, generated 
by Fireworks. 


Access: From the ‘BulletBuilder’ entry in the Commands menu. 


Select File>Install Extension. Locate the 

extension you just downloaded. Remember it 
has an .mxp file extension. You'll be prompted to 
accept a Licence Agreement. Click Accept. The 
installation now begins, and you'll be told when it’s 
complete. Click OK. That's all there is to it! Your 
newly installed extension should now appear in the 
Extension Manager window. 
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Part 3: Useful Extensions 


Obscure or general-purpose, there’s an extension to do 
just about everything you can think of in Dreamworks... 


ix AD GS> OE 


Atomz Search Engine — this extension adds a 

powerful search engine to your page. You can 
choose between a simple or advanced form, but 
both root through the contents of your site. Here's 
an example of the advanced search form. Think 
about it: when was the last time you added a search 
engine to your site in less than ten minutes? 


{ Cancel 


4 Bust Frames — this extension prevents anyone 
from loading your pages within a frameset. If 
you're a control freak, you'll love this. If someone 
tries to load the page into a frame, it automatically 
opens a new browser window instead. 


Close Pop-Up Window Link - Dreamweaver 

comes with a Behaviour that enables you to 
open a new browser window. Thing is, how do you 
close it? This extension inserts a link that does just 
that. Simply click the Window Close Link object 
and you're ready to go. Exceedingly handy. 
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2 | Nokia WML Studio (PC only) — it's hard to 
believe that this extension is actually free. It 
enables you to design content for mobile phones, 


using the WAP (Wireless Application Protocol), and 
comes complete with a mobile phone emulator that 


enables you to preview your pages in seconds. 


ey MFX_FullScreen — this extension makes the 
browser window open up to full screen. And if 
you're using /E on a PC, it can possibly fill up the 
entire display! Although this may not be something 
you use on every site, it's incredibly handy to have 
around when you do finally need it. 


es Insert Calendar 


MFX_SlideMenu — this extension makes it 

incredibly easy to add an animated menu to 
your page. It only works with version 4 or later 
browsers, but still looks cool. Simply answer a few 
on-screen questions, click OK, and you have a 
menu system ready for editing. Without such an 
extension, this process normally takes ages. 


SS Loren (pn BS 


Cancel 
(Help| 


Lorem ipsum 
Insert dummy text 


‘This has been Yet Another Cursor Creation, 
©1999 Captain Cursor Creations. 


Latin Text — this extension inserts a few 

paragraphs of Latin text (the classic ‘lorem 
ipsum’ filler text), which is great when you're 
building site prototypes. Just enter the number of 
characters you need, and Latin Text does the rest. 


Dinpiay Date: @ wrow O nce 
strtvenks wie: (Sanny 1) 

days Format: @ on O sunday 

Enoty Frames: @ oisotry O Combine 


Display Months: © Current Only D Previous/Followiny 


August 2000 
isl MST ET 
a0 fz oi 


6 | Calendar — this extension enables you to add 
a table-based calendar to your page. Simply 
select the month, year and formatting options, and 
then click OK. Not massively useful for most Web 
pages, sure, but handy to have around nonetheless. 


dovascript Stuff SS 


First Cobe 


Seeeed Datoe 


Accepts Either a Color: ‘white’ or Mex: #EFFFFF* 


9 | Alternate Table Rows — this extension shortcuts 
the formatting of a table with rows of alternate 
colour. Select a colour for the first and second rows 
and it happily applies that formatting to the entire 
table. A huge time-saver, this one... 


Part 4: Creating Custom Objects 


Adding to Dreamweaver isn't as complicated as you might think... 
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Atomz 

Characters 
Common, 
Forms 
Frames 
goodies 
Head 
Invisibles 


Cc The Objects palette makes it easy’to add a 
variety of commonly-used elements to your 
Web page. These Objects are also available from 
the Insert menu. Because Dreamweaver is 
extendable, you can create your own custom 
Objects, tailored to your specific needs. 


Insert E-Mail Link 5 

a SCS NS 
{ Cancel 
| Help 


Click the Insert E-mail Link object, in the 
Common Objects palette. Enter some text and 
your email address. Save this as a Custom Object, so 
you don't have to enter this information every time 
you want to add your email address to a page. 
Click OK. This adds an email link. 


Common 


54 items, 1.17 GB available 
yr = 


—, 


& 


a 
Table.htm 


> 
& 


= 
Tabular Dats htm 


Table.js Tabular Date.gif 


7 When you selected Insert>Save Selection as 
Object... Dreamweaver creates a new 
document inside the Common folder, which is inside 
the Object folder, which is inside the Configuration 
folder inside the Dreamweaver application folder. 
This is where the default objects are stored as well. 


Macromedia Exchange tor Dreanvwsaver 


Object Maker Exter 


Platforms 


xc ma 

2 | Go to the Macromedia Exchange for 
Dreamweaver and download the Object 

Maker extension. This extension makes it a snap to 

create your own Objects, Once you download the 

extension, use the Extension Manager to install it. 


Create Object From Selection 


Object File Namne 


Ob ject Category 


Type in a file name for this Object, select the oategary 


the Odjeot from the Objects Palette, you will need to re= 
start Oreamweaver, 


5 | With the email link still highlighted, select 
Insert>Save Selection as Object.... This opens 
up a dialog box where you can name the Object 
and choose the Object panel into which it’s saved. 
Give the Object a filename and select Common as 
the category you want it saved to. Now click OK. 
That's all there is to it! 


8 | If you open the HTML file that Dreamweaver 
generates when you make the extension, 
you'll see what makes the Object tick. It’s nothing 
more than an HTML document with all the code at 
the top (HTML, BODY, TITLE, tags) stripped out. 


ee 
4, @ 
fe) 
iB 
3 


eps 


Atomz 
Characters 
Common 
Forms 
Frames 
gaodies 
Head 
Invisibles 


fleload Extensions | 


3 | Open Dreamweaver and create a new blank 
document. Option + Click (Mac) or Ctrl + Click 
(Windows) at the top of the Object palette, and 
then select Reload Extensions from the pop-up 
menu. This forces the extensions to reload without 
you having to restart Dreamweaver. 
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Create a new blank document. Make sure you 

have the Common Object palette visible and 
then Option + Click (Mac) or Alt + Click at the top 
of the Object palette. Select Reload Extensions, You 
should see a new object appear. Move your mouse 
over this new object. Click on it. It automatically 
adds your email link to the page. 


9 | You can also create custom icons for your 
Custom Objects if you like. Simply make a GIF 
image that is 18 x 18 pixels and save it in the same 
folder as the HTML file. Make sure you give the GIF 
file the same name as the HTML file. When you 
now reload your extensions, you'll have a new 
icon, instead of the default one. FEE 
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Dreamweaver UltraDev 1.0 (4 


Is Macromedia on roll with Drumbeat's successor? We put it to the test... 


Price 
£469 


Company 
Computers Unlimited 


Telephone 
020 8200 8282 


Website 


www.macromedia.com 


Features 


« Dreamweaver 3.0 core 
functionality 


© Web application development 
ASP, JSP and Cold Fusion support 


© Connect to databases with JDBC, 
ODBC or ADO 


Add database functions to 
existing sites 


¢ Edit in visual or source mode with 
‘Roundtrip’ code 


° Preview Live Data view 
* Design SQL Queries 
* Drag-and-drop Server Behaviours 


¢ Extend with JavaScript and XML 


System 


PC: Pentium P166+ * Windows 
95/2000/NT * 48RAM # 30MB HD 


Mac: PPC « Mac OS 8.6 * 48RAM 
* 30MB HD 
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tonly seems like two minutes 
since the last major release 


| Dreamweaver UltraDev isn't 
so much an upgrade as a parallel 
release. Quite recently Macromedia 
saw a gap in its product line and bought 
up the rights to Drumbeat, a Web 
application development environment 
which enables you create dynamic 
database-driven ASP or JSP- 
compliant pages. After a cursory 
release for the repackaged Drumbeat 
2000, the product has been retired and 
replaced by UltraDev. Rather than 
revamp Drumbeatto fit in with the 
existing product line, the company has 
built Drumbeat-like functionality over 
the core of Dreamweaver 3. The result 
looks and acts like Dreamweaver 3, but 
comes equipped with a bunch of extras 
that are aimed at making it easier for 
designers to make and work with 
server-side Web applications. 

UltraDev has most of Drumbeat’s 
functionality, but significantly, adds 
support for Cold Fusion alongside 
Active Server Pages and the Java 
Application Server. However, although 
Dreamweaver is the best drag-and- 
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Help: 


With the design power of Dreamweaver and 
that package's extensibility, you can import 
any project and add database elements. 


drop design tool for Web pages 
available, Drumbeat was also good at 
its job — UltraDev needs to be quite 
special for Macromedia to justify 
replacing such a capable tool. Our test 
drive revealed that although UltraDev 
is an improvement over Drumbeat in 
terms of extensibility, workflow and 
server support, it achieves this by 
sacrificing some of the complexity of 
the former tool. 


Looks familiar 

The interface provides few surprises 
for Web design professionals. It’s 
Dreamweaver 3.0 — pure and simple. 
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Expert City at [w] www.expertcity.com uses 
ASP pages built in UltraDey, to provide real- 
time IT support to subscribers across the Web. 


UltraDevis the best testament to the 
extreme extensibility of the package 
we've seen so far, and the transition is 
seamless. Alongside all the familiar 
options are new, more esoteric palettes 
and inspectors designed to deal 
specifically with dynamic data sources. 
The basic procedure for inserting 
such data is very easy, too. Utilising the 
same working methods you employ 
when creating Dreamweaver templates 
— you start by designing your page or 
creating a page from a template. You 
then put ‘place holder’ items in to your 
page — a process that’s not nearly as 
complex as it sounds. If you want a 
dynamic heading in a table cell, you just 
type something like ‘title here’ in the 
appropriate place. Need a spot to put 
an image that’s taken from a database? 
Just type ‘image’ where you want it to 
go. The next stage is to select the place 
holder text and open the new Data 
Bindings palette. When creating a new 


Dreamweaver UltraDev takes the core functionality of Macromedia's top Web authoring 
tool and adds multi-platform database support. The company is still working on the same 
“Scaal Coffee’ site it has been using since Dreamweaver 1.0 though... 


site in UltraDev you're invited to select 


erver Behaviors 


F)(=) Server Modet. ASP - JavaSeript 


UltraDev server behaviours enable you to 
drag and drop interactive database functions 
like searches, and set templates for record 
sets directly to your page. 


remote and local servers and define a 
data source; the database you'll use to 
store the content in your site. This data 
source appears in the Data Bindings 
section as a Record Set. To add 
dynamic, database content you simply 
drag and drop the name of the record of 
your choice to the appropriate selected 
placeholder. And that’s just about it. 


Data creator 


Of course, nothing is quite so simple in 
the world of Web application building, 
mainly because there are many, many 
different models for serving database 
information. UltraDev doesn't support 
them all — but it does support the most 
popular commercial solutions. 
Microsoft's Active Server Pages in 
either VBScript or JavaScript flavours, 
Java Server Pages and Cold Fusion are 
supported. Database support is good 
too, with the option to connect to any 
JDBC, ODBC or ADO-compliant 
databases. This encompasses smaller- 
scale databases like Access and 
FileMaker documents, all the way up to 


large-scale solutions like Oracle and 
MS SQL Server. The most significant 
omission is the lack of support for PHP 
a popular and free scripting alternative 
favoured by many Webmasters. 
However, there’s no other visual Web 
development package that supports 
PHP at this level either. 


Retro round-trip 


Although the core functions of 
Dreamweaver are well known to many 
users by now, there are features that 
really come into their own in UltraDev. 
Roundtrip coding is preserved, as are 
the Quick Tag features of Dreamweaver 
3.0 — making it easy to switch between 
source view and visual editing. There’s 
also another viewing mode that enables 
you to see how your data bindings look 
in the finished pages, without having to 
start up a browser to check them. 

One of the great advantages of this 
is that it enables you to easily retro-fit 
existing sites written in plain HTML with 
database components. With the same 
site creation and import tools as found 


Connecting a database to the Web 


With U/traDev this is a simple process — here's how... 


As in Dreamweaver 3, every project 
starts with defining a new site. With 
UltraDev, you also have to define what 


server technology to use. You can choose 


from ASP, Cold Fusion or JSP depending 
on the kind of server you have installed. 


4 | Once the site is defined, you'll have 


to specify and connect to a database 
data source. Go to ‘Modify>Connections', 


click ‘New’ in the dialog and use the 
variety of options available to browse for 


your database file and set up a ‘Run-Time’ 


connection. The procedure will differ 
somewhat, depending on the type of 
server technology you're using. 


The Windows version of U/traDev 

comes with limited versions of the 
Cold Fusion Server and IBM's WebSphere 
— or you can use Windows Personal Web 
Server for ASP pages. On the Mac you 
can test JSP pages locally with Sun's Java 
engine, or create CFML or ASP pages and 
deploy them remotely. 


You'll also need to set up a ‘Design- 

Time’ connection. Windows users 
should be able to accept the defaults 
presented to them. Mac users, if using 
anything other than a JDBC connection, 
will have to configure their Design Time 
connection so that it runs using JDBC. 
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Group of Vetronix Corporation, Our 
charter is to create innovative 
products by leveraging Vetronix's 


industry leading vehicle interface 
technology along with wireless 


Fieet Manegement _ 
WiretessRoad 


solutions. The activities of the 


Vetronix In-Vehicle Products Group 
fall into two categories: 
Management telemetry products, 


and Auto PC applications. 


Vetronix 
In-Vehicle Products 


served 


oWhaele New ____ 
Current Svents, News 


Content-heavy sites like vetronix.com are easier to create, using a combination of Dreamweaver's 
core template capabilities and the dynamic content that UltraDev enables you to add. 


in Dreamweaver 3, you are able to build 
your new sites from scratch, use old 
templates, build new ones, or add 
database content to previously static 
pages — it’s really up to you. Many other 
Web application development tools just 
use proprietary formats and only write 
actual pages on publication. The 


3 | You may also need to configure the 
Live Data window at this point to 
work either with a server that’s running 
locally, or with a remote server on the 
Internet. Now simply fill in the appropriate 
details in the ‘App Server Info’ section in 
the Define Sites dialog. 


6 | You should be ready to define a 
record set to use in your page from 
the database you're connected to, which 
you do using the ‘Add’ button in the Data 
Bindings inspector. Although this set-up 
process seems interminable, working with 
the program from that point on is 
remarkably similar to working with the 
standard release of Dreamweaver. 


Dreamweaver core in UltraDev makes 
application building a much more 
flexible proposition. 


Designs on databases 


For all these features, including Server 
Behaviours which enable you to drop 
common objects directly into pages 
and an SQL Query writer for more 
advanced database search functions, 
there’s one aspect of the defunct 
Drumbeat that will be sorely missed. 
Drumbeat's configurable site-creation 
wizards were one of the package’s main 
selling points. We also missed the 
hierarchical view that Drumbeat gave 
you of the data relations ina site. Still, 
what you lose in focus on data sources 
you gain in ease of use and design power. 
UltraDev is worth considering if you 
are planning to build small-to-medium 
sites with database connectivity. If you 
are a Drumbeat or Dreamweaver user 
already though, you may feel a little 
bit miffed that you have to stump up 
another £100, for an app that effectively 
centralises most of the functionality you 
already have in the applications you're 
currently working with. El 


Verdict 
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For: Visual development 
environment ¢ Legacy site import 
¢ Cross-platform development 


Against: Complex configuration 
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creation wizards 


Dreamweaver special 


arts 


[Dreamweaver|/ 


Where's the best place to find out about Web design (apart from Computer Arts)? The Web 
itself, of course. No need to search fruitlessly though — here’s the essential resource guide 


Dreamweaver & UltraDev 
Massimo’s Corner 


[w]www.massimocorner.com 

Massimo’s little corner of the Web may not look 
spectacular, but it boasts a healthy number of 
eminently useful add-ons for Dreamweaver, UltraDev 
and Fireworks. Commands, objects, inspectors and 
behaviours are all covered, along with tips and tricks — 
from inserting a Shockwave Director file into 
Dreamweaver, to creating an animated zooming GIF in 
Fireworks. It’s not a site for beginners, though; each 
entry has a brief line of description, so it’s assumed you 
know pretty much what you're doing and why. 


Dreamweaver Depot 
[w]http://people.netscape.com/andreww/ dreamweaver | 
Possibly one of the most quoted Dreamweaver 
repositories, although it doesn’t seem to have been 
updated for a while and most of the categories are 
empty. Still, what’s there is pretty impressive; there's a 
hefty set of actions and objects, nearly all them created 
by the site’s maintainer, Andrew Wooldridge. If you can't 
find what you're looking for, Andrew can create custom 
objects, extensions and so on — for a fee, of course. 


Dreamweaver News and Information 
[w]http://www.owlLnet.net/dwnews 
It’s something of an irony that many of the 
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The site launched by our parent mag Computer Arts features a 
massive collection of tutorials, forums, tips, galleries and more. 
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Dreamweaver help sites are so poorly designed. 

Still, what DWN lacks in prettiness and design nous, it 
more than makes up for in sheer volume of info 
available. A kind of clearing house for all manner of 
info and extensions, some of it hosted on the site and 
some available via links to elsewhere. There’s a handy- 
dandy search facility for finding just about anything 
DW-related you want, a whole slew of tips (in no 
particular order, unfortunately), various help sections, 
resources and FAQs. You can also subscribe to the free 
monthly newsletter to keep up with the latest on 
everything Dreamweaver. 


Dreamweaver Supply Bin 
[w]http://home.att.net/~JCB.BEI/Dreamweaver 

A rather snazzy, if slow, intro leads you to one of the 
Net’s handiest little stores of pre-made stuff for 
Dreamweaver. Unfortunately the rest of the pages are 
garish to say the least, but the content kicks. There's a 
broad selection of objects and behaviours here, 
succinctly but jauntily described for quick browsing. 
Unfortunately, once again, the site doesn't appear to 
have been updated for a year or so, and the forum, poll 
and so on are very much out of date. 


The Dreamweaver Bible 
[w]www.idest.com/dreamweaver 

Basically a plug for Joseph Lowery’s eponymous book, 
but what a book it is. This is the indispensable guide for 
any level of DWuser, versions 2 or 3. The site itself 


doesn't contain an awful lot, offering links to buy the 


book (with a special offer if you buy it directly through 
Joseph) and a comprehensive contents list; but it does 
have a link to the Dreamweaver Extensions Database 
and a newsletter with some handy tips. 


Project VII Design 
[w]www.projectseven.com/dreamweaver 

At last — a Dreamweaver-related site which actually 
looks the part. Not surprising, since the folks at Project 
VIl are Web designers themselves. Instead of working 
directly with companies, Project VII aims to help other 
Web designers who may be ‘stuck’ or need to learn 
something fast. There’s a Learning Centre — witha 
bunch of fairly advanced tutorials for both DWand 
UltraDev — a Download Centre featuring a mixture of 
objects and behaviours, and a slew of links. 


Useful resources 


The Ultimate Counter 

[w]www.ultimatecounter.com 

So you want to add a hit counter to your site to see how 
many visitors you get? This is the place where you'll 
find what must surely be the Web’s most popular 
counter service, with over 400 million counters in 
operation! You can use the basic service for free, and a 
small upgrade fee gives you more advanced options. 


Bellsnwhistles.com 

[w]www.bellsnwhistles.com 

Building your Website can demand a great deal of 
resources, such as graphics, applets, programming 
help, music files, construction tools and heaps more. 
This site is the definitive starting point, with literally 
hundreds of files for you to download and use 
absolutely free of charge. 


The Java Centre 

[w]www.java.co.uk 

HTML might be fine for basic page design, but when 
you want interactivity, you’re going to need a language 
such as Java. The Java Centre is a central resource for 
all things Java in the UK, from news and events to book 
reviews and code snippets. There's even a series of 
Java applets available for download. 


FreewareJava.com 

[w]www.freewarejava.com 

You can really add some excitement to your Website 
using Java applets, and this is certainly a great place to 
start your search. It contains 670 downloads, not to 
mention links to Java e-zines, 23 tutorials, jobs and 
more besides. It’s also a very clean, functional site to 
find your way around. 


Dr Website 
[w]www.nerdworld.com/users/dstein/nw405.html 

No matter how good you think your knowledge of Web 
programming is, you're bound to encounter problems 
from time to time, especially when new versions and 
commands are appearing almost daily. This site is a 
huge archive of questions and answers on all things 
Internet, and better yet, they're categorised for your 
browsing convenience. 


Web Building 

[w]www.help.com/cat/4/ index.html? tag=st.hp.fd.ont.cat_4 
There are times when it’s not enough just to read an 
FAQ or browse through an archive of previous 
questions. This site hosts a huge number of Web- 
related question and answer forums, and links directly 
into many newsgroups, too. 


Graphics and design 
DHTML Zone 


[w]www.dhtmlzone.com/ index.html 

Dynamic HTML has a rather unfair image of being 
simply a way of flinging animations around the screen, 
when it’s actually a much broader set of disciplines, 
incorporating JavaScript and other advanced 
techniques. The DHTML Zone is a scholarly collection 
of articles and tutorials, designed like Macromedia’s 
own site, covering just about everything you need to 
know about DHTML. Particularly groovy is the 
complete DHTML site for a fictional clothing company 
called Superfly, which demonstrates (complete with 
tutorials) pull-down menus, animations, games and a 
load more. A fair bit of knowledge is assumed, however. 


Computer Arts 

[w]www.computerarts.co.uk 

Well, if it isn't Computer Arts — Britain's best-selling 
magazine for creatives, and parent of Computer Arts 
Specials. This is Computer Arts online — a stonking 
collection of news, tutorials, tips, galleries, forums and 
more. Catch up on the news at it happens, find the best 
tutorials from the past four years of the magazine, 
discuss the issues that matter and find answers to your 
technical queries. It’s not just Web either — everything 
Computer Arts is in here (3D, DY, illustration, reviews, 
multimedia/new media, and more). 


Computer Creative 
[w]www.computercreative.com 

And what, pray, is Computer Creative? It’s the online 
creative resource from Future Publishing, no less, | 
featuring a raft of content from our creative magazines, 
including Computer Arts, 3D World, MacFormat, 
CreateOnline and the imminent DV World (first issue | 
on-sale 11 October). As with the Computer Arts site, 
here you'll find a wealth of tutorials, the latest news, 
reviews, forums and so on — but drawing on the whole 
range of material from these magazines, as well as | 
featuring exclusive Web-only content. 


The HTML Learning Centre 
[w]www.w8nation.com/resources/learning/html/index.html 
HTML is constantly evolving, and this site offers 
tutorials that are bang up to date. We particularly liked 
the fact that it includes program-specific tutorials for 
Dreamweaver, enabling you to avoid raw HTML 
altogether for most of the time. 


Computer Graphics on the Net 
[w]http://ls7-www.cs.uni-dortmund.de/cgotn 

It often seems as though America virtually owns and 
runs the entire Internet, which is why it’s refreshing to 
discover this European links site. Unlike most sites, 
which concentrate on mainstream computer graphics, 
this scholarly site provides links to sites that focus on 
graphics development and science. 


The Graphic Vault is a repository for a collection of free graphics 
with a touch of class including a heap of page furniture. 


View point 

[w]www.viewpoint.com 

Probably the major player in the world of serious 3D 
models, Viewpoint has an extensive catalogue of 
movie-quality datasets costing from under £20 to 
hundreds of pounds each. They will also build models 
to your precise requirements. There’s a complete 
on-line catalogue, which is fun to ogle over, even if 
you can't afford much... 


Zygote 

[w]http://store.zygote.com 

Top quality 3D models are hard to come by, but Zygote 
is one of the major players in the market. Unlike 
Viewpoint, whose models — although excellent — tend 
to be expensive and very high-end, Zygote creates 
models and props for fun programs like Poserand 
Bryce, as well as covering the professional stuff. 


Free Graphics 

[w]www.freegraphics.com 

One of your key resources when building a Website will 
be the graphics you use. Most people acquire clip art 
libraries, but when you're getting started, or if you’re 
looking for something specific, a site such as this, with 
links to hundreds of free graphics sites, might well be 
the perfect partner. 


3D Cafe 

[w]www.3dcafe.com 

You can never have too many 3D models and this site is 
a great source of free and commercial ones. There's 
also a chatroom, a modelling forum, links to other sites, 
a model exchange and even the chance to find jobs in 
the industry. This is a comprehensive site with 
something to offer anyone with an interest in 3D. 


The Cooltext site helps you to design unique logos starting from 
a range of basic styles and customising them online. 
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Cooltext.com 

[w]www.cooltext.com 

Why waste time designing your own logo when this 
handy site will do it for you? Choose from 21 basic 
styles and then customise your choice online to create 
logos that are anything but mundane. A great way for 
beginners to create custom graphics. 


Photo Secrets Stock and Royalty-Free 
Photographs 

[w]www.photosecrets.com/links.stock.html 

The difference between a professional-looking site and 
an amateur one is often the fact that the amateur one 
uses corny clip art. This Website provides links and 
searches to millions of royalty-free stock photos which 
you can use to improve your online image. 


The Graphic Vault 

[w]www.graphicvault.com 

Although there are literally millions of free graphics out 
there, including every type of Website furniture, it’s still 
always nice to encounter a site that offers something a 
little bit classy. This site offers everything you could 
need to make stylish-looking Web pages, including 
textures, buttons, dividers, backgrounds and more. 


Clip Art.com 

[w]www.clipart.com 

Although free clip art may not be the way to add 
originality to your site, it’s certainly a good way to keep 
your costs down when you're getting started. This is 
another excellent links site that provides access to 
dozens of other sites containing millions of items of 
clip art. A lot of it might be cheesy but you never know 
just what you might find here. 


Computer Graphics Resources 
[w]www.nerdworld.com/users/dstein/nw405.html 

Thanks to its poor design, it’s tedious to browse through 
this site, but it hosts a huge list of computer graphics- 
related resources, including individuals, companies, 
chatrooms, articles and more. There are also many 
related topics, such as animation, graphics hardware 
and virtual art, each of which also has their own 
extensive directories of contacts. 


Ryan Noguchi’s Computer Graphics 
Resources 
[w]www.geocities.com/CapeCanaveral/4726/zcg.htm 

This site will never win any design awards, as it’s no 
more than a list of hyperlinks, organised by category. 
Nevertheless, this is one of the more comprehensive 
and better organised graphics-related links sites we've 


Stuck on how to do a certain little something? Visit the Project 
VII site — it’s specifically designed to help you out fast. 
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encountered. It’s particularly good for finding more 
esoteric things like graphics programming, texture 
libraries, hardware resources and so on. 


Optimising Web Graphics 
[w]http://webreference.com/dev/graphics 

With so much dross on the Web, it’s critical that your 
site loads before people lose interest and go 
elsewhere. The best way to do that is to optimise your 
images so that they’re as compact as possible. This 
superb site is a comprehensive guide to the process. 


Promote your site 
NetMechanic 


[w]www.netmechanic.com 

NetMechanic specialises in services to enhance your 
Website and get it noticed. The company also 
specialises in products that monitor your site so that 
you can see it as your potential viewers do and 
intercept problems before you lose visitors. 


Webmaster Resources 
[w]www.webmaster-resources.com/freetools.shtml 

If you’ve created a Website that you want people to 
know about, this is a useful site. It includes a Metatag 
generator for search engine submission. It also 
provides a report on your Metatags. Once you're happy 
with the results, use Simple Submit to submit your site 
to over a dozen major search engines. 


Submit It 

[w]http://free.submit-it.com 

With hundreds of search engines and millions of pages 
of on-line information, it can be a daunting task to 
advertise your Website. For a small fee, you can pay the 
professionals to do it for you. This site offers various 
levels of service as well as the ability to monitor how 
effectively your site is registered. 


Introduction To Search Engine Design 
[w]www.searchenginewatch.com/webmasters/intro.html 

It’s not enough simply to register your site with search 
engines, you've got to understand how they work, too. 
This superb site describes the way you can move your 
site up the ratings so that it comes up in the first page 
or two, every time someone searches. This is not a site 
you want your competitors to visit! Better hope they 
don’t read Computer Arts... 


Promoting Your New Website 
[w]www.bygpub.com/webpromotion 

Getting your new Website known and recognised is a 
task in itself. Don't try to figure it all out on your own 
though, this great site covers a multitude of topics 
including search engines, linking and so on. 


Reference and training 
Grafx Design 


[w]www.grafx-design.com/tutorials.html 

There are loads of excellent tutorial sites offering 
general training in everything from graphics to HTML. 
However, this one is unusual because it provides 
tutorials on several specific programs, Photoshop, 
CorelDraw and Paint Shop Pro. There are also the 
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more general tutorials covering such things as 
animated GIFs and the use of colour on the Web. 


Creating Killer Websites 
[w]www.killersites.com/core.html#top 

Although this site is actually an advert for the second 
edition of the best-selling book Creating Killer 
Websites, the site includes a generous number of 
design tips taken from the book. Even if these don't 
tickle your fancy, this site is genuinely appealing to 
look at, unlike so many sites purporting to provide Web 
design services or tips. 


The DTP/HTML Tutorials 

[w]www.dtp-aus.com 

When it comes to page layout, the basics of paper 
layout still apply to Web pages. That’s why this site, 
which includes tutorials on both desktop publishing 
and HTML, offers something beyond the norm. You can 
learn the fundamentals of good page layout, then learn 
how to apply them to your site. 


WebDeveloper.com 

[w]www.webdeveloper.com 

There’s an amazing number of people out there who are 
freely providing vast amounts of design and 
programming knowledge. This site is the hub of a vast 
network of Web experts who are only too happy to 
provide you with tips and help on every conceivable 
aspect of Web design, from search engines to colour 
schemes and beyond. 


The Source for Java Technology 
[w]http://java.sun.com/docs/index.html 

There are some first-rate Java reference sites on the 
Web, but this is one of the more scholarly, catering for 
experienced Java coders. There's comprehensive 
documentation covering the language, as well as 
detailed specs explaining the real nitty-gritty. Before 
you buy any books on the language, check out this site. 


Design Sphere 

[w]www.dsphere.net 

Here’s another comprehensive site where you'll find 
the hours passing like seconds as you lose yourself in 
its tips, business directory, graphics FAQ and online 
magazines (e-zines). If you're looking for staff or a job, 
you'll be especially interested in the jobs section, the 
featured artist and folio. 


Web Reference 

[w]www.webreference.com 

There are so many facets to designing a Website, 
including psychology, marketing, layout design, 


The Web Reference site offers advice on all aspects of Web 
design in the form of FAQs, articles and programming advice. 


programming, funding, new technologies, security 
and much more. This extensive site hosts FAQs, 
professionally written articles, design tips, 
programming advice and more. 


Scott's Tutorials Hotlist 
[w]http://cires.colorado.edu/people/peckham.scott/tutors.html 
The Internet is a place of extremes. There are lots of 
ignorant, selfish people, but there are millions of 
altruistic folk giving freely of their time and knowledge 
for no reward. This site is a jumping-off point to 
tutorials on everything from Java to Unix and beyond. 


Multimedia 


Crescendo 

[w]www.liveupdate.com 

Crescendo is one of the Web’s most popular music 
players. Webmasters can use it replay MIDI files and 
MP3s. Users can download the player software and 
change the skin of the jukebox to suit their mood. This 
is where you'll find both the player and the 
Webmaster's hosting scripts. 


Real Networks 

[w]www.real.com 

Video adds immediate impact to your site and when it 
comes to Internet streaming video, RealPlayer is one of 
the most popular decoders. At this site you can also 
buy the encoder software as well as tools to 
incorporate streaming video directly into your own 
Website. It’s not particularly easy though, so don't 
expect instant results. 


Add Sound to Your Website 
[w]www.webdiner.com/Webadv/inter/audio.htm#basic 
Although it’s entirely possible to trigger wave files, play 
MIDIs, MP3s and other streaming audio formats, it’s 
surprising how few Web hosts know how to include 
such files, or understand the issues governing their use. 
This site provides a basic overview, with links to other 
related sites too. 


Webmonkey 
[w]http://hotwired.lycos.com/Webmonkey/multimedia/ 
audio_mp3/index.htmL 

Adding multimedia files such as audio, animation, 
video and even Flash files is a great way to create 
interest and generate a word-of-mouth buzz about 
your site — provided you don't go over the top. This site 
provides many intelligent and well-written essays on 
diverse Web-related subjects, and you're bound to find 
something of interest. EE 
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JavaScript 
and Behaviours 


Time to get your fingers dirty with the stuff that 
really makes the Web go round: JavaScript. 


f ever there was an adage that 
threatened to bore the 
planet, ‘Don't run before you 
can walk’ would be it. So 
here, in the spirit of good geekish 
decadence, is something a little more 
hardcore than the run of the mill: a tutorial 
about... well, code. Full-blown JavaScript 
in fact, under the guise of Dreamweaver 
behaviours, specifically with the sailed- 
ahead designer in mind. 

You can just about get away in Web 
design without taking even a sneak peak at 
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the clever garble under the bonnet of the 
site you're making. But if you want to get 
cocky with advanced dynamic effects, 
Dreamweaver’s prefab Behaviours will 
only see you half the way home. Soon 
enough you'll have to cut to the chase and 
write the darned stuff yourself. 

So we're going to show you a lot of both, 
and hopefully in a friendly enough kind of 
way to be sure you won't get too lost. You 
might have to stop and think it through 
from time to time, but a little effort is good 
for the soul... 


Multi-rolls: a quick primer 
We all know how to make a rollover — that’s old hat 
these days. But you should know the basic syntax for 
changing an image: 


document.images[imagename].src=newsrc 


That goes in between <script><!-- ...--></script> 
tags. Got it? Put that in a function: 


function changeimage(imagename,newsrc){ 
document.images[imagename].src=newsrc 


} 


...and the swap doesn't happen instantly, but is stored 
instead as a kind of behaviour or action in the Web 
page. You can now call the action from any link simply 
by putting this in the <a href> tag: 


onmouseover="changeimage(‘imagel’,’newsrc1.gif’)” 


Easy. Make sure, by the way, you've put 
name="imagel’” in the relevant <img> tag. So now 
you're not relying on Dreamweaver's rollover code 
any more, but can make your own, and easily set two, 
three or 10 rollovers to happen all in response to a 
single mouse action: 


onmouseover="changeimage(‘imagel’,’newsrc1.gif’); 
changeimage(‘image2’,’newsrc2.gif’)” 


The semicolon, by the way, is essential. Also, it’s a 


good plan to put scripts that hold your function in the 
head of your HTML doc. 


Pop-up windows 


Show-hide layers 

Making pictures swap all over the shop is one thing, 
but half the time it’s the words you want to change, 
and it's a hassle (and bad for the download) to go GIF- 
fing them all up. The easy solution is to put the words 
in layers and show/hide them at the right time. This is 
handy if you've got a lot of words and not much screen 
estate; and perfect for captions which appear when 
you roll over images. 

Dreamweaver includes a show hide layer 
behaviour: create a layer, create a link, and choose 
Show-Hide Layers from the + drop in your 
Behaviours palette. (Be sure, by the way, as soon as 
you're using layers to add in the Netscape Resize fix 
from your Commands menu.) 

But the problem comes if what you really want is 
the same button to toggle the layer, depending on 
whether it’s already showing or hiding. You'll have to 
code it yourself. The syntax for showing and hiding 
layers is: 


layername.style.visibility="visible/hidden” //in IE 
document.layername.visibility="show/hide” //in NS 


The way to check what state the layer’s currently in, 
and then make the right swap, is: 


if (layername.style.visibility="visible”){ 
layername.style.visibility=” hidden” 


} 


That's for IE — don’t forget to work it for Netscape too. 
Then wrap it up in a function, such as: 


function showhidelayer(){ 
if (layername.style.visibility="visible”){ 
layername.style.visibility=" hidden” 
} 


Don't forget to change layername for the name of your 
layer. And then put onmouseover="showhidelayer()” 
in the relevant <a href> tag. Easy! 


Browser sniffing 

So it looks like you'll have to write two lots of code, 
right? You can use the Dreamweaver browser sniffer 
behaviour to get your user onto the right page — just 
select it from your Behaviours palette drop-down, fill 
in the gaps in the dialog, and you're fine. 

But it’s much easier to make just one page, and 
that’s no problem if you create your own sniffer. The 
following just sets ie=1 if your user’s in /nternet 
Explorer, or ns=1 if they're in Netscape, up to the v5 
browsers, anyway: 


ie=(document.all) ? 1:0 
ns=(document.layers)? 1:0 


So now you can keep a single page friendly towards 
different browsers, just by wrapping your bits of code 
in conditions checking to see which browser it is: 


if(ie){ do this } 
if (ns) { do that } 


If you want to get more fussy, you can ask about 
operating systems, and the like: 


ag=navigator.userAgent.toLowerCase(); 
win=((ag.indexOf(“win")!=-1)]|(ag.indexOf(“16bit”)I=- 
1) 
mac=(ag.indexOf(“mac”)!=-1); 


There are lots of ‘ultimate sniffers’ out there on the 
Web, but to be honest they're a bit much for most 
people’s needs. 


Annoying they might be, but sometimes they're necessary... 


a Popup windows are a perennial fave in designer's 
galleries, for showing off individual images. And 
Dreamweaver, no surprises, has the behaviour. So create 
your thumbnail, place it in your HTML file, and give it the 
link “javascript:" — which does nothing. 


a Now in your Behaviours palette, choose Open Browser 
Window from the + dropdown at the top left. This 
offers choices over the popup sizes, and whether you want 
toolbars and so on. Add in the URL of the HTML page 
holding your big image. 
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a The popup name only becomes important if you want 
the popups to open in a separate window each time, 
while another popup is still open. Sometimes it’s useful to 
replace the popup name with a variable, and change that 
every time a new window opens. 


Sound behaviour to add browser-native incidental sounds to * 
your rollovers? Make sure you use a format like WAV, though, 
which doesn't need an external player window. 


Change Property 


g Change Property is a great behaviour for, say, 
changing the background colour of a layer, or the text 
of a form field. First create a layer and give it a name. then 
create some text with the null link, “javascript:". 
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An innocent-sounding command, but one you should definitely know... 


Layer writing 
Another technique is better, though, if your words are 
all staying in the same place, or you've got a lot of 
swaps to make. This only uses one layer, and changes 
the exact HTML that’s written in it, on the fly. 
Dreamweaver includes a behaviour, Set Text>Set 
Text of Layer from your + drop-down in the 
Behaviours palette. Just select your link, get the 
behaviour, and type in or copy and paste your new 
HTML. The basic syntax for this in Netscape is: 


document.layername.document.write(‘new text or 
html in quotes here’); 
document.layername.document.close() 

In /E it’s a bit easier: 


layername.innerHTML="new html’ 


So if you wrap it in a function with a variable 
newhtmlL... 


function writeit(){ 


iffns) { 


document.layername.document.write(‘ne 


w text or html in quotes here’); 
document.layername.document.close() 


iffie) { 
layername.innerHTML='new html’ 


} 
} 


Then in the <a href> you simply put 
onmouseover="writeit(”. If you need to put a single 
quote in the HTML, by the way, write \’, so the 
browser doesn't get confused. 


PR I 


} 
| 
| 


Z| Then choose the Change Property behaviour in your 


Behaviours palette, and in the first dropdown in the 


dialog choose DIV. Set IE5 as the browser, and choose the 
style.backgroundColor property in the next dropdown. 
Finally, enter a hex value like #3333CC for the colour. 


Quick array 

This, however, is still a bit crazy if you’ve got a lot of 
different captions, say, to write to the layer. You need 
to do a function for each one, with the right HTML in 
it. But you can get away with this by setting up a 
bunch of variables storing the HTML beforehand, and 
then just tell the browser to write the relevant 
variable: 


thehtml=new Array() 


thehtml[O}='first bit of html in here’ 
thehtml[1]='second bit in here’ 
//and so on... 


The double dash, by the way, is a comment mark. 
Now you just change the function to: 


function writeit(thenumber){ 


if(ns) { 
document.layername.document.write(th 
ehtml[thenumber]); 
document.layername.document.close 


iffie) { 
layername.innerHTML=thehtml[thenum 
ber] 
} 
} 
And in your <a href> you put 


onmouseover="writeit(1)”, swapping 1 for whichever 
number in the array you want. 


Slide show 


This technique is fantastic for creating a slide show. 


The only problem with this is the code isn't cross- 
browser, so you'll either have to use Dreamweaver's 


Check Browser behaviour to redirect your user to the 
relevant page for their browser, or create your own sniffer 
to keep it all in one page — check out the main article. 


You want a single image space, with Back and Next 
buttons below it, and you want these to cycle through 
the images. You put the URLs of all the images into 
the array: 


theimage=new Array() 
theimage[0]="address.gif” 
//and so on 


And then you write your image swap function with the 
variable imagenum, which you set to 0 first: 


imagenum=0 


function changeimageQ{ 
document.images[imagename].src=theimage[ima 
genum] 


} 


Then in your Next button’s <a href> you add 
onmouseover="imagenum=imagenum-+1;changeima 
ge()”. For your Previous button, it’s -1, not +1. Getting 
the idea? 

Of course, you want it to stop or loop when the user 
gets to either end, so you just add a checker into the 
function. theimage.length gives how many entries 
there are in the theimage array (including the O 
entry). So, for a loop, you just add into the function 
(before the image swap line): 


iffimagenum>theimage.length-1) { imagenum=0 } 
if magenum<0) { imagenum=theimage.length-1 } 


You can also include an! in your condition checker to 
make it negative, and && to check two conditions. So 
the complete function for a stop would be: 


function changeimageQ{ 


= 
-s This becomes powerful if you're dealing with forms — 
say creating an e-commerce form, with an entry that 
shows the bill depending on what choices your user has 
made. Add an input area and give it useful name, and add 
an <a href> too, again with just “javascript:” as the link. 


if(limagenum>theimage.length-1) && (limagenu 
m< 0) 
document.images[imagename].src=the 
image[imagenum] 


} 
} 
And there you go. You could also include in that some 


lines which change the forward and next buttons when 
you get to the end of the sequence. 


News ticker 

So if you combine these things — Layer writing and 
looping an array — with a simple timer, which doesn't 
need user interaction, you can create your own a news 


Moray 

News! A new version (1 1) of the Extension Manager 15 now 
evollable} Visit the Fco0un0 Maraaet erties gage to update * 
‘your software today 
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Head to Macromedia's behaviours exchange, where you can 
download lots more great behaviours, get into discussions 
about them, and post your own too: 

[w] http://dynamic.macromedia.com/bin/MM/exchange/ 
dreamweaver/main.jsp 


5 | In the Change Property dialog, choose INPUT/TEXT in 
the top dropdown, and your textfield’s name in the 
second. Then just type the new text into the space below. 
Now hit F12 to preview the page, click the link, and see 
what happens. 


G Now select the textfield itself, apply a Change 


ticker. The syntax for a timer is simple: 
setlimeout(afunction(’,500). 

The second entry, 500, is the time to wait in 
milliseconds. The first entry is the name of a function 
to do after that time. So for your image swapper, you 
could put in the <a href> tag, 
onmouseover="setlimeout(‘changeimage()’,500)” to 
put a 1/2 second delay on the action. 

To create a news ticker, you need to put the timer 
within the function, telling it to repeat itself after a 
delay: 


thenumber=0 
function writeit0{ 


if(thenumber> thehtml.length-1) { thenumber =0 } 
if (thenumber <0) { thenumber = thehtmLlength-1 } 


if(ns) { 
document.layername.document.write(the 
html[thenumber]); 
document.layername.document.close 


} 


iffie) { 
layername.innerHTML=thehtml{thenumb 


} 


er] 


thenumber=thenumber+1 
setTimeout(writeit()’ 500) 


} 


And there's your news ticker. Don't forget to change 
layername for the name of the layer, of course... 
See? JavaScript’s easy when you know how. Ea 


Property behaviour from your Behaviours drop-down 


menu, and select the same textfield again — but this time 
leave the value empty. In your Behaviours palette, click the 
drop-down beside onBlur and change it to onFocus. 
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Dr eamweaver 3 HOT: Hands-On Training 


Updated for version 3.0, Weinman's tutorial remains tops... 


[Price 
£29.47 


RS se 


[ Author 


_ 4 


Reais Weinman 


—— Press 
[ISBN 
0201702762 


xpanding on her earlier book, 
this second edition of the 
essential H.O.T Dreamweaver 
course covers the new 
ai and enhancements developed 
for version 3. Following the same format 
as her earlier book, Web guru Lynda 
Weinman writes in a light friendly style, 
honing down her prose to the bare 
minimum needed to explain the 
technique or feature in question. 

As its title suggests, you learn by 
doing with this series of books. Each 
chapter uses a real-world project to 
illustrate a technique in action. If you 
appreciate this more hands-on 
approach to learning, then you'll enjoy 
Weinman’s stance. Each feature is 
explained in depth, and supported with 
appropriate screenshots. 

What makes the book unique, 
however, is the expert use of the 
accompanying CD-ROM, which 


contains more than the usual project 
files you need to complete each tutorial. 
Using her experience in the classroom, 
Weinman has also included some well- 
chosen QuickTime movies that actually 
show you in real time how key features 
of Dreamweaver 3 work in practice. 
Sometimes the written word can't fully 
describe the operation of a feature, but 
an animated movie can. 

If you’re new to Dreamweaver, and 
looking for more than just a simple 
explanation of features, icons and 
buttons — accompanied by a healthy 
dose of real-world Web page building 
advice — then this manual is more than 
up to the task. Weinman even finds time 
to look at other elements of site design 
— browser considerations, colour on the 
Web, and so on. 

This essential knowledge enables 
you to not only learn Dreamweaver, but 
avoid the major pitfalls all beginners 


fall into. It also provides you with a rock 
solid knowledge base; and from here 
you can add even more advanced 
techniques to your skillset. 


Verdict 
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Dreamweaver 3 
Visual Quickstart Guide 


| Author 


J Tarin Towers 


"fea Press” 


| 80 | Dreamweaver special 
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his addition to the excellent 

( Visual Quickstart series is 

uP comprehensive to say the least. 
Now expanded to cover the latest 
features of Dreamweaver 3.0, the 
tried-and-tested formula of concise 
chapters, comprehensive explanations 
and well-chosen screenshots still 
proves a potent combination. 

This is very much a hands-on tutorial 
that moves from first principles to 
advanced features with ease and 
simplicity. Well-captioned screenshots 
and support information, as well as 
essential hints and tips, reduce the 
stress of learning, too. With this book 
by your side, you never feel that a 
technique or feature is ever beyond 
your capabilities. 

This is the manual that should have 
come with your software... 


Verdict 
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Mastering 


Dreamweaver 3 


Price ig ] 
D & R Crowder 

| Author a 
Sybex 

| Publisher : ] 
£29.99 

[sen 


0782126243 


f you prefer using Photoshop 5.5 
HT for all your Website graphics, 
af then the last third of this manual 
won't be of much interest — because it 
covers Fireworks. That said, the 
preceding two-thirds do take you 
on a detailed, if haphazard, tour of 
Dreamweaver 3. 

This is a good manual for the more 
seasoned Web designer who wants to 
see what's changed. As a reference 
manual to dip into, it’s also excellent. 
Beginners, though, will find the going 
tough, because much of each chapter is 
taken up with description. 

This addition to the Mastering series 
looks and feels like an academic 
explanation of Dreamweaver instead of 
a hands-on tutorial. Effectively, then, it’s 
a professional manual produced by 
professionals for professionals. 


Verdict 


SIC 


Dreamweaver 3 


French Websters loved it — and now you'll love it too... 


Price 


£14.99 tfirst glance, this cheap and 
cheerful manual seems to 
offer little to the budding 
j [i Dreamweaver guru, but 
Ch ristophe Aubry nothing could be further from the truth. 


(Translated from the French Translated from the original French, this 


by Elisabeth Blamire) is the beginner's guide we've all been 
: waiting for. And don't be fooled by its 
Publisher apparent brevity; within these 350 
ENI Publishing pages is all you need to know about how 


to design sophisticated Websites using 

ISBN every single one of the advanced tools 
offered up by the latest incarnation of 

2746010771 Dreamweaver. Just add a smattering 

of imagination. 

Dispensing with flashy design 

and pages upon pages of unwanted 

description, each one of Dreamweaver 

3's features is systematically covered; 

all the way from how to define the files 

and folders that go to make up your first 


Website, through tables, frames, layers, 
objects, right up to optimising your 


Teach Yourself 
Dreamweaver 3 


[Price | 


ie ee i — } earn how to build sophisticated 
£17.99 | Web pages in under 24 hours — 
(rpg — an that’s the remit underlying 
| Author ; 7 7 | SAMS' high-powered manual for 
Betsy Bruce Dreamweaver 3. And, for the most part, 
-_ ha ae it does just that. 
[ Publisher | Each self-contained lesson boasts an 


| 


_ mecncceneneencemee array of hints and tips to help you make 
the most from the software, while Q&A 
sections complete each hour’s work 
with a workshop that tests how much 
you've learned from each chapter. This 
helps you see how you're getting along, 
without bogging you down in stats. 
However, unlike Short Order 
Dreamweaver, Teach Yourself 
leaves looking at that all-important 
configuration of Dreamweaver until the 
end of play, when really it should be 
covered before you type your first 
HTML tag. A strange oversight, that. 


Verdict 


SD 


HTML code — and even customising 
Dreamweaver itself. 

What makes this manual such a joy is 
that each icon is placed in the text that 
explains its function — instantly 
enabling you to make the visual 
connection when you see it within 
the live Dreamweaver workspace. 
Admittedly, this does endow the manual 
with an ’80s look and feel. Remember 
the ring-bound manuals that came with 
your Commodore 64 or Sinclair 
Spectrum? Then you'll have an idea just 
how this book is designed. 


At the end of the day, though, this | designed to help you as you become 
system works. It also demonstrates that more proficient with the package. 
you don't need one thousand pages to ENI has published the novice'’s 
explain the software's basic operation; | essential Dreamweaver manual. 
just some clever descriptions, capably | is 
supported by decent screenshots. Ve rd | ct 

If you’re a complete starter, this is 
definitely the best beginner’s guide that 
money can buy. Clear, concise, and | 


Short Order 


Dreamweaver 3 
La See imed at the intermediate to 
A 


£14.50 advanced user, this manual 
a covers the essential techniques 
Author | you need to build a competent Website 
Steven Moniz ; a. using Macromedia’s flagship program. 
Beginning with an overview of 
Publisher | version 3, including its greater 


= ‘aie integration with Fireworks, subsequent 

Hayden Books chapters describe each key area of Web 
af page design such as editing text, 
ISBN | ; ; : rae 
L importing and manipulating images, as 
well as using tables and frames. 
Unfortunately, although the author 

provides plenty of hints and tips, no 
single element is explained in sufficient 
depth. Beginners, for instance, will find 
the language used confusing, while 
experienced users will lament the 
lack of detail. Business users, however, 
may find the section on e-commerce- 
enabled Websites useful. EE 


Verdict 
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Creating a 
shopping site 


Adding a shopping cart to your site might sound daunting, 
but it needn't be too bewildering. This advanced tutorial 


will show you how 


ost companies, large or 
small, will tell you that e- 
commerce is the way 
forward — but very few 
currently seem to be doing it properly. If 
you're going to be selling anything on-line, 
you obviously need a robust and user- 
friendly system for doing it. 

Bespoke e-commerce systems can 
often cost thousands of pounds and be a 
nightmare to set up and administer. 


However, there are easier and cheaper 
ways of achieving the same result — all 
you need is a copy of UltraDev, a freely 
available extension and a bit of 
programming nous. 

This tutorial will take you through 
setting up and using a relatively simple 
shopping cart system, which can be 
extended and customised as you need it. 
It’s not secure, though — making such a 
site is a much more complex process. 


Illustration: Bryn G Owens. Email: wun com 


Creating the cart 


Although you'll need to do a lot of preparation, 
there's no need to create the cart itself — 
someone else has done that for you... 


1. One of the best extensions to 2 Choate the cart: ss sesten dts 
UltraDev enables it to take on many toneed to set up the tables in your 
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We include the field ‘productid’ to 
enable us to find out which item it is 
the customer has put in the cart. 


3. Create your list of products using a 
standard recordset to grab them from 
the database, and use the standard 
repeat region command to allow you 
to display as many different items as 
you want on the same page. If you are 
unfamiliar with UltraDev, a recordset 
allows you to group a cross-section 
of data from a database. This data is 
the specified return of an SQL query 
(which is a set of rules to return only 
data that is within specified 
boundaries, e.g. ‘select all records 
where product_type=T-shirts’). 


4. Go to Server Behaviors>UltraDev 
Shopping Cart. First you will need to 
give the cart a name, choose whether 
you'd like to use cookies or not 
(selecting 0 days means no cookies) 
and select which fields you'd like to 
use. Cookies are small files stored on 
the user’s computer, and are useful 
for storing information. Whether you 
should use cookies or not is a tricky 
question, and deserves a whole 
article in itself. In general though, 
they do make life easier. There will 
be some fields there already and 
some (such as total) are a 
combination of two (price and 
quantity for example). This will then 
enable you to add an ‘Add to cart via 
link’ behaviour, which will add an 
item to the cart and take you to see 
which products you have ordered. 


5. Copy the shopping cart from the 
product list page by right-clicking on 
it in Data Bindings and paste it into a 
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new page — we'll call it ‘cart’. In fact 
we recommend copying the cart 
every time you start a new page, as it 
saves you from creating it again for 
each page. Design this page, dragging 
elements from the shopping cart 
onto the page as you would with a 
record set. 


6. Place the shopping cart behaviour 
‘Repeat cart region’ over the area that 
you want looped. You may also want 
to add the ‘Empty cart’ behaviour 
which clears all the items in the cart 
and also a ‘Redirect if empty’ 
command which redirects the user 
away from cart to a specified page of 
your choosing if they've somehow 
managed to get to the cart page by 
mistake (or even deliberately). 


7. To set the quantity, drag the 
quantity field into a spare bit of the 
screen, select and cut before then 
pasting the code into the value 
attribute of a text field. To allow these 
changes to be registered place a 
form button on the page, and then 
apply the ‘Update cart’ behaviour. 
This links the form button with the 
update cart behaviour to update the 
quantity of your item. This behaviour 
can be extended to other elements 
such as colour or size. 


8. We're going to need to take the 
user’s details and to do this we're 
going to use a standard ‘Insert 
record’ behaviour. This will add the 
customer's details to the database. 
Once the record has been inserted, if 
we want to then retrieve this data we 
are going to need to know a unique 
identifier which identifies the correct 
record. Normally this means the 
customerid, which is the key field. 
However, we can't get this until we've 
actually entered the record. Luckily, 
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Enter 2 Session variable name or select one hom the 
Dynamic Sources dialog. 
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the UltraDev shopping cart uses a 
behaviour called ‘Get unique ID from 
table’ which retrieves the last 
customerid value, stores it ina 
session variable and then increase 
the value of the integer by one. This 
gives you a unique new number for 
the next new customer. Here, we've 
created a separate table with one 
field to store this. The value of this 
field represents the value of the last 
customerid value plus one. Set this 
manually in the database to be one 
greater than the last customerid value 
(if you have no customers as yet then 
set this to one). This allows us to know 
the customerid of the customer’s 
details before they have even been 
entered into the database. We can 
recall this from a session variable on 
another page so as to allow us to 
identify the cart with a customer. 


9. Use the ‘Insert record’ behaviour in 
UltraDevto place the customer's 
details into the database. At present 
the customer's details aren't linked to 
an order. These details are being 
entered now so that when the cart 
data is added there is a related 
customer record for the shopping cart 
to be related to. There’s no error 
checking in the pages — though this is 
something you can easily add 
yourself with a fairly basic grasp of 
one of the scripting languages 
UltraDev supports. For now, if a user 
enters illegal information (text in the 
credit card number field, for example) 
they get a standard ASP error. 


10. Create a confirmation page. The 
confirmation page is similar in layout 
to the cart page. Use the dynamic 
shopping cart fields together with the 


‘Repeat cart’ region to list the 
products on the page. 


11. Again we're going to use the ‘Get 
unique ID from table’ behaviour (see 
step 8). This is implemented in the 
same way as on the user details page, 
but is used to work out the nextcartid. 
The code for the nextcartid variable is 
then placed into a hidden field. 


12. To insert the date and time we 
need to create two hidden fields. We 
are going to enter some simple ASP 
code into the value attribute of the 
hidden fields. Entering 
<%response.write dateY%> for the 
date will print the current date into 
the hidden field value when the 
document is parsed by the server. In 
the second field, <response.write 
time%> will denote the time at which 
the file was requested by the client. 


13. There are two main changes 
performed upon the database when 
the confirm page is submitted. An 
‘Insert record’ behaviour inserts a 
new record into the table cart 
containing the values of the order 
(including the customerid session 
passed from the last page). Secondly 
the ‘Save to cart’ behaviour will insert 
a record for each product in our 
invoice into the table cartitem. 
Buying two different products in the 
same order will result in two separate 
records in cartitem. We can tell they 
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are related to the same cart order 
because both share the same cartid 
value. 


14. The last point to cover is to make 
a thank-you page for those that have 


saececeeeressearn 


successfully completed an order. At 
this point you can take the 
opportunity to clear the user's 
session by placing a ‘Return to site’ 
link or similar, and wrap it in the 
‘Empty cart’ behaviour. 
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Add an update page 


You can expand on the basic shopping cart in 
many ways. Here's an example — updating your 


product list automatically 


1. Update pages are pretty similar all 
round. We're going to write a page to 
update the product list we created in 
the shopping cart tutorial. Create a 
new listing of your products, or 
simply make a copy of your existing 
product list. Add an update link which 
will pass the user to the update 
page... update.asp perhaps. To know 
which record to edit we pass the 
variable ‘customerid’ in the link to the 
update page. To denote variables in 
the URL a question mark is used 
followed by ‘variablename=" and then 
the variable, in this case the 
recordset value of productid. The full 
length of the link looks like this: 


2. The update page needs a 
recordset. We use the 
‘request.querystring(“productid”y to 
grab the value of the variable 
productid passed from the last page. 


This allows us to retrieve the whole 
record from the database using only 
the unique identifier of the table. 
Next, drag and drop the dynamic 
fields from the recordset into the 
appropriate text fields. 


3. To apply the update use the 
‘Update record’ behaviour. This is 
really simple if you have named all 
the text fields. Try to get this right first 
time as the Update behaviour seems 
to go haywire if you play with it too 
much. Probably the best thing to do 
then is to delete and reconfigure all 
the dynamic elements of the page 
(JavaScript and ASP). Actually we'd 
recommend doing this any time you 
feel strange things start happening. 


4. After an update the URL refreshes. 
You can choose for it to refresh to 
itself, to the product list page or 
somewhere else. We'd recommend 
creating a small page with just one 
line of text to verify the update. Use 
the ‘Insert refresh’ command to 
create a small delay before the page 
updates redirect the browser to, say, 
the product list page. 


5. That's it - a fairly basic cart with 
the minimum of work. Nice! EXa 


Computer Arts Web Special — 
COSB0007 

It's 100% Web design, with 175 
essential tips, 12 all-new pro 
tutorials and the secrets behind 
on-line interactivity revealed. Be 
inspired by the world’s greatest 
splash screens, meet some of 
Britain’s most cutting edge Web 
designers, and enter a whole new 
dimension with a look at 3D on 
the World Wide Web. 

CD Fireworks — full Web graphics 
application (dual), plus NetObjects 
Fusion 2.02 (PC only), a complete 
site design program, and demos 
including Dreamweaver 3. 
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Computer Arts DV Special — 
COSB0008 

Enter the world of digital video, 
with a little help from our 101 
professional tips. Discover how to 
create a pop promo for MTV for 
under £500. Follow our expert 
tutorials showing you how to edit 
your footage with style, and all 
the latest software and hardware 
is reviewed, with a special look at 
Apple's Final Cut Pro 1.2. 

CD MediaMania Video (PC only), 
a complete suite for creating your 
own video effects. Plus quality 
royalty-free footage and effects, 
and a digital video demo collection. 


e free in UK. Add £1 per iss 
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Computer Arts 3D Special — 
COSB0009 

Think 3D is too difficult for you? 
Think again. The latest 3D 
Special will explain the tips and 
techniques from beginner to 
advanced. There are tutorials for 
LightWave, Maya, 3D Studio MAX, 
83 tips for the top packages, and 
inspiring profiles from pros and 
amateurs alike. Plus, how to get a 
job in 3D, resources, and more. 
CD PIXELS3D/2.1.4 full version 
(Mac only), a complete tool for 
modelling, rendering and 
animating. Plus demos of Cinema 
4D XL 6, Bryce 4 and lots more. 


Computer Arts Web Special — 
COSB0010 

Our latest Web design special 
gazes into the stars and predicts 
the future of WAP, the technology 
that's bringing mobile phones and 
Web design together. Some of 
Britain's most successful Web 
design houses are profiled, and in 
addition to 71 Flash Tips, we've 
got tutorials on LiveMotion, 
Dreamweaver 3 and JavaScript. 
CD Trellix Web 2.5 and Web Media 
Publisher -— Web design packages 
for PC, plus Freeway, a Web design 
package for Mac. Plus 100 Flash 
symbols from the Sparkle collection. 


ue for European orders. 


Add £3 per issue for the r of the world 


Computer Arts Photoshop 
Special — COSB0011 

Recreating the cover image with 
our massive tutorial is only the 
start of this invaluable Photoshop 
resource. Discover new tricks 
with 101 tips, use Photoshop 
with the Web, check out the latest 
cutting-edge illustrations, and get 
the definitive low-down on plug- 
ins. Plus resources, guides 
shortcuts and Websites. 

CD A complete version of 
Intellihance 3.0, the excellent 
image-enhancement plug-in. Plus 
My Portfolio, a handy image 
cataloguing tool, and 10 demos. 


Issue 44 - Code CA044 

Adobe LiveMotion beta, Final Cut 
Pro review, scanners round-up. 
CD LiveMotion beta & free fonts. 


Issue 45 — Code CA045 
FreeHand 9 tutorial, photorealistic 
3D Skills, Discreet Combustion*. 
CD FreeHand 9 & trueSpace demo. 


Miateien Siti: coriog atone ‘Win the Adobe Web Catlection! 


Issue 46 — Code CA046 
Web-fuelled multimedia with 
Director 8 plus Graduate Showcase. 
CD 30-day demo of Director 8. 


Issue 47 — Code CA047 

Escape CMYK plus Photoshop 6 
revealed and cloning skills. 

CD 30-day dual trial of LiveMotion. 
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Issue 48 — Code CA048 

Master MoviePack, plus 
combustion and UltraDev reviews. 
CD 30-day trial of MoviePack. 
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[Dreamweaver] 


Allsorts of Dreamweaver extensions, objects and add-ons are cropping up on the Web. 


Computer Arts gives you the low-down on some of the best — and where to find them... 


Bust Frames 
www.macromedia.com/software/dreamweaver/download/ 
extensions/bustframe.html 

Prevent other Websites from placing your pages within 
a frame with this crafty extension from the purveyors of 
Dreamweaver. Macromedia claims that “page-jacking 
is becoming more and more common on the Web” and 


that the “Bust Frames extension helps you prevent this.” 


Now you can prevent others from placing your hard 
work within an infinitesimal frame. Simply download it 
(available for both Mac and PC), install, and it’s added 
to the Behaviour Inspector. Place the Bust Frames 
behaviour within the BODY tag, with an onLoad event, 
and it automatically checks when loading to see if the 
page is placed within a frame. If it is, the Bust Frames 
behaviour literally ‘busts’ the frameset and replaces it 
with your entire page. 


Scroll Message 
www.macromedia.com/support/dreamweaver/upndown/ 
objects/00_ object.html 

Ever wanted — or needed — to insert a scrolling 
message in the status bar of your visitor’s browser, 
but not had the knowledge or time to knock up the 
JavaScript? Well, luckily for you Macromedia has 
provided just the thing via its fantastically thorough 
Website. Simply download the file and drop it into 
the Dreamweaver/ Actions folder. Voila! As much 
scrolling text as a budding builder could ask for. 


Visit The Dreamweaver Lounge for a honed batch of practical 
add-ons that will make your Web-building life sheer heaven. 
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Random Images 
www.macromedia.com/support/dreamweaver/upndown/ 
objects/00_object.html 

A page which delivers a randomly generated image 
every time you visit, or click Reload, can be one of the 
most intriguing and sticky on the Web. You can find this 
beauty of an object (by Alexander Czernay) on 
Macromedia's Dreamweaver Exchange — and it’s a 
great tool for generating random images from a given 
set. This is the perfect solution if you need to showcase 
your work, but have neither the time nor the patience to 
create a comprehensive gallery. 


Replicator 
www.macromedia.com/software/dreamweaver/download/ 
extensions/com_10.html 

Another fantastic command extension from the home 
of Dreamweaver, this time intended for the exact 
replication of any single object. This is a great time- 
saving device, especially useful for the replication of 
repeatedly used icons or buttons. Not much else you 
can say about this, apart from it doesn't work on 
multiple objects. Extremely handy, though, wethinks. 


Change URL 
www.macromedia.com/software/dreamweaver/download/ 
extensions/beh_30.html 

This cunning little behaviour comes courtesy of the 
Web guru that is known as the Webmonkey. The 
behaviour, once inserted into the Configuration/ 
Behaviour/Actions folder, can be used to change a 
URL depending on a visitor's actions. It’s simply a 
matter of highlighting the URL you'd like to change, and 
then providing the new URL into which it changes when 
the given event fires. A great little number, this can 
increase interactivity and enjoyment throughout your 
site. Again, you can pick this up at Macromedia. 


Quick Window 
people.netscape.com/andreww/dreamweaver/actions.html 
This is a great little add-on that enables you to inform 
your visitor of what follows a link — without the need for 
text on the actual Web page. It cleverly pops up a 
‘Quick Window’ whenever you hover above an assigned 
link, in much the same way as a Windows ‘tool-tip’. 
Simply attach Quick Window to a MouseOver event 
and set what you want the window to say. A nice, 


unobtrusive touch that will inform your visitor of what’s 
coming next, while keeping the design of your site as 
clean as possible. 


Tickertape 
www.subnet.co.uk/brendan/dreamweaver/behaviours.html 
A tickertape gizmo on your page not only looks flashy, 
but can also give visitors short bursts of information 

— extremely quickly. Implementing one of these into 
your site used to be a laborious code-driven process 
— until now, that is. Those clever coding bods at 

The Dreamweaver Lounge have come up with a 
Dreamweaver extension that makes it a simple matter 
of choosing a font, font colour and border, and inserting 
the tickertape into your page — without the need for 
any coding whatsoever. 


Guestbook 
www.subnet.co.uk/brendan/dreamweaver/objects.html 
Brendan Dawes, ace programmer of The Dreamweaver 
Lounge, is at it again, this time proudly presenting what 
he calls Guestbook-o-matic. And in the same funky 
stylee, the Lounge wizards invite you to get feedback 
from ‘crazy kids and cool chicks’ with this neat little 
guestbook, which you can easily insert into any 
Dreamweaver page. Simply drop the object on a page, 
fill in a few details and you have a fully working 
interactive guestbook. Fantastic. 


RealVideo embed 
www.subnet.co.uk/brendan/dreamweaver/ objects.html 
Another great Dreamweaver object to be found in The 
Dreamweaver Lounge, this time enabling you to embed 
RealVideo streaming video into your site without 
launching an external player. If you really need to have 
streaming video on your site, then you could really do 
with this. It’s compatible with RealPlayer G2 and works 
with Dreamweaver 2 and 3. 


Button-O-Matic 
www.subnet.co.uk/brendan/dreamweaver/ objects.html 
Another object from the self-confessed Dreamweaver 
Nuclear Scientists at The Dreamweaver Lounge, this 
time enabling you to create buttons directly from 
within Dreamweaver. Admittedly, it only works if you’ve 
got Fireworks as well, but if you have, you can choose a 
size, colour, add some text and a button is inserted into 


your page — automatically anti-aliased to your 
document's background colour. 


QuickTime 4.1 Controller 
www.subnet.co.uk/brendan/dreamweaver/objects.html 

If you're tired of using the standard QuickTime 
controller with your embedded movies, check out this 
magnificent behaviour from The Dreamweaver Lounge. 
If you've got the QuickTime 4.7 plug-in, it’s possible to 
create your own buttons to control play, stop, rewind 
and so on... Great for adding a personal touch to your 
site, the only downside being it only works in Netscape! 


Spacer Creator 
www.subnet.co.uk/brendan/dreamweaver/commands.html 
A handy behaviour for owners of both Dreamweaver 
and Fireworks, which makes the laborious task of the 
creation of 1x1 pixel spacer GIFs as easy as pie. Now 
you can create these essential little design aids 
directly from within Dreamweaver. The great thing is, 
the colour of the GIF automatically matches the 
background colour of your document, so you can then 
insert it into your page and save it in any position you 
like — it’s completely up to you. Only works with 
Dreamweaver 3 though. 


Resolution Redirect 

www.massimocorner.com/ 

If you've ever designed a site specifically for viewers 
with a screen resolution of 1024x768, only to find out 
that everyone is still viewing it at 800x600, this 
extension will be invaluable. Coming from Massimo’s 
Corner of the Web, this handy add-on redirects visitors 
to different pages depending on their screen 
resolution. A good extension for ensuring visitors see 
your page as it should be seen. 


IE Scrollbar 

www.massimocorner.com/ 

Those pesky scrollbars in /nternet Explorer can really 
hinder the looks of your site, so why not get rid of them? 
By downloading this behaviour from Massimo’s Corner 
you can do exactly that. Although this add-on might be 
a tad annoying to some visitors, it can reveal the design 
of your site at its very best. 


Layer Wipes 
home.att.net/%7EJCB.BEI/Dreamweaver/ 

By now there’s a possibility that you may be bored with 
the conventional way of hiding and showing Layers 
within Dreamweaver. lf so, you might want to take a 
look at one of these nifty transitional Layer wipes. This 
sort of effect used to be a major coding nightmare, but 
now you can quickly and easily apply many effects to a 
layer (things like Wipe right, Wipe left, Wipe down, 
Wipe up, Box in and Box out), using the relevant 
behaviour. Even better, all these add-ons work in both 
/E and Netscape. To find them, pop along to The 
Dreamweaver Supply Bin. 


IE window resize 
home.att.net/%7EJCB.BEI/Dreamweaver/ 

Pretty simple this. What we have here is an extremely 
useful behaviour for resizing visitors’ browser windows 
when your page loads up. Use it to make the most out of 
asmall design or simply for fun (it only works on 
Internet Explorer, though). Go and get this from 

The Dreamweaver Supply Bin. 
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For helpful Behaviours and Objects, rummage around in The 
Supply Bin at home.att.net/%7EJCB.BEI/Dreamweaver/ 


Fade Text 

home.att.net/%7EJCB.BEI/Dreamweaver/ 

For a long time now, it’s been impossible to fade a part 
of the screen as a transition. Well now, thanks to Kevin 
Bartz at The Dreamweaver Supply Bin, it’s become 
little more than a formality. This script gradually 
changes the colour of text, so you can fade, make bold, 
or apply virtually any kind of coloured text effect. 


Check Form 

www.yaromat.com/dw/index_be.html 

This form validation behaviour from Yaromat’s superb 
archive of Dreamweaver extensions claims to “make 
much more than the native DW behaviour.” The last 
thing you need when sifting through visitors’ 
information is that some vital snippet is missing. Well, 
with this extension, things are made easy. You can 
validate radio buttons and checkboxes, as well as lists 
and other input fields. But the standout feature is the 
fact that you can define custom error messages. Shame 
it only works with Dreamweaver 2 and 3. 


Design View 

www.yaromat.com/dw/download.html 

This extremely handy Dreamweaver 3 command 
makes designing your pages a whole lot easier — and 
should prove a favourite of print designers moving over 
to Web design. When added to the Dreamweaver 3/ 
Configuration/Commands folder, it enables you to 
toggle on/off all of the Dreamweaver helpers, like 
dotted table borders, layer borders or the yellow 
invisibles which appear on a page while designing 


bao 


» Dreamweaver, Depot 


Another cool site for exciting plug-ins is The Dreamweaver 
Depot. Just follow the on-screen prompts for the latest... 


— a bit like the Invisibles command in QuarkXPress. 
This is an essential addition for Web-builders wanting 
to edit inside an uncluttered environment. 


Add Favourite 
home.att.net/%7EJCB.BEI/Dreamweaver/behaviours.htm 

A particularly sneaky behaviour this, but extremely 
good for reminding visitors who you are and where your 
site is. Simply download the action, drop it into 
Dreamweaver/Configuration/Actions and, hey presto, 
you have a behaviour to insert that automatically adds 
your page to the favourites list of your visitors (as long 
as they're using /nternet Explorer). Excruciatingly 
annoying for some, but if you feel you really need to 
promote your site this way, then pick it up now. 


Allow Dynamic Font 
home.att.net/%7EJCB.BEI/Dreamweaver/behaviours.htm 
This great little behaviour from the awesome 
Dreamweaver Supply Bin enables you to easily put a 
specialised or created font in your page which all your 
visitors can view. A fantastic way of showcasing your 
created fonts or creating a wickedly-designed page 
without the need for many image files. 


Scrolling link list 
home.att.net/%7EJCB.BEI/Dreamweaver/objects.htm 

Does your link page lack the design and quality of your 
other page because of lack of space? Or do you like 
cramming vast amounts of info into a small space? 
Well, fear not, because this superb behaviour from the 
cunning behaviourists at the Dreamweaver Supply Bin 
have come up with just the thing. This behaviour 
automatically inserts a list of links (all of which are 
easily editable to include your own links) within a small 
space. Only a few of the links are visible at any one 
time, but by hovering your mouse above or below the 
list it scrolls to reveal all. Better still, this behaviour 
works with both Netscape and Internet Explorer. 


Full screen 
www.beyond-design.com/dreamweaver/new/index/main.htm 
This behaviour is rather self-explanatory. However, it’s 
also a useful tool for linking to another URL in all its 
full-screen glory. Or if you need to link to another one 
of your pages that, design-wise, requires full-screen 
viewing for maximum impact. It can be hideously 
frustrating for the viewer, admittedly, but then this is 
all in the name of creativity. Check out the fantastic 
interface on the download site as well — it’s so good 
you almost think you’re in Dreamweaver itself. FEES 
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And here's that fantastic Full Screen interface in action. You 
almost feel as if you’re still working in Dreamweaver. 
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Matinée Store Guide Useful Information 


About Matinee Sound & Vision 


Our On-line Services 


CD-ROM & Presentations 


Video & Sound Production 


Feedback Form Contact Us 


You saw it first in Computer Arts. Get noticed, get ahead... 


Send your work to us along with a full 
explanation of your techniques and 
software, the titles of each piece, and your 
telephone number on the disk itself 
(featured artists are often approached for 
work). Images should be sent as PC or Mac 
TIFF or JPEG files on CD-ROM, Zip carts or 
floppy disks, and a hard copy is a great 
help. Apart from floppy disks, all entries 
will be returned. All contributions are 
submitted on the basis of a non-exclusive 
worldwide licence to publish, both in 


printed and electronic form. Email your 
entries to: ca.exposure@futurenet.co.uk or 
post them to: Exposure, Computer Arts, 

30 Monmouth Street, Bath, BA1 2BW. 
Note: Selection and production does take 
some time so please don't inundate us with 


phone calls! 


www.matinee.co.uk 


Matinee 


[t] 020 7231 4376 

[m] 0958 243 365 

[e] spencer@matinee.co.uk 
[w] www.matinee.co.uk 


Inspiration can come in various shapes 
and forms and sometimes it’s hard to put 
your finger on. “I couldn't directly 
identify any one source of inspiration for 
our Website,” explained Spencer White, 
senior designer at Matinee Sound and 
Vision. “Having said this there were 
certainly a few CDs that inspired the 
design team — | think Morcheeba 
deserve a big mention. We were all 
bouncing ideas around and evolving the 
ideas as we progressed and drew great 
influence from one another.” Matinee 
Sound and Vision is an award-winning 
new media agency with clients including 
Chrysalis [w] www.cre.co.uk and 
Electronic Arts [w] www.bullfrog.com. 
Flash 4 was used for the majority of the 
site with the rotating pills courtesy of 3D 
Studio MAX. Spencer decided that a 3D 
approach would give the site a more 
futuristic appeal. “In creating the 3D 
‘vortex’ environment and the floating 
pills, we are trying to affect a tranquil, 
futuristic atmosphere,” he said. 
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Year of the Artist 


[t] 020 7565 9007 
[e] wayne.kaminsky@content.co.uk 
[w] www.yearoftheartist.co.uk 
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Wherever you live in England, or if you will be visiting England over the next year, 
it’s easy to find out what's happening throughout this ambitious, exciting project 
Over 1,000 artists are working in cities, towns, villages, rural and urban places 
across the country, across every conceivable artform, including dance, theatre 


There are several ways in which you can access what's on, 
by month, region or by artform only, or by 2 combination of ail 
three. For example, if you wanted to know what music-based 
residencies are happening throughout the Year, simply select 
Music from the Artform box. Likewise, if you want to know 
what Music residences are happening in June m the East 
Midlands, select these from the appropriate boxes and click 
Find’. The information will appear below the ‘Find’ button, so 
simply scroll down to view the diary. Click on ‘more details’ for 
full information and images 


This area will be updated during the Year, so visit it regularly to get the latest picture of what's happening 


ENGLISH 
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“From the start | loved the novel concept 
of 1000 artists in 1000 locations spread 
over 365 days. The Website needed to 
mirror this unique event and be different 
from anything else | had seen before on 
the Web,” explained Wayne Kaminsky, 
the creative director behind the Year of 
the Artist Web site. The site has been 
designed by Content Content Ltd who 
used Adobe /llustrator, Photoshop, 
Fireworks, Flash and Dreamweaver to 
create the site. A major consideration in 
the design was that as many people as 
possible could view it whilst maintaining 
a good design — the site is after all 
representing artists. “We have to be 
aware of users browsing from home 
using slow modems,” said Wayne. “l 
reduce file size by reusing as many 
elements as possible in Flash and 
limiting colour on image export and 
selectively using pictures. The site had to 
be organic rather than structured and 
tabular, hand drawn and sketchy as 
opposed hard-edged computer vectors, 
alive and expressive to draw people in.” 


Face for Watches 


[t] 01865 821 821 
[w] wwwaceforwatches.com 


Face for Watches is a cutting-edge 
retailer of the latest and rarest funky 
watches and its site was designed and 
built using only Flash 4 technology. “As 
far as we know, this site was one of the 
first in the UK to be designed throughout 
in Flash 4, so there was a steep learning 
curve,” explained Chris Caller of 
Domino Systems, who designed and 
developed the site. “We worked closely 
with the client, got input from other 
designers within Domino, and enjoyed 
the challenge.” The freedom of 
developing an online presence from 
scratch meant Domino could be in 
control of the whole shopping process. 
“The bricks and mortar stores of Face 
have been designed to create a feel and 
atmosphere — as part of the overall 
image of the shops and products sold. In 
some ways we were able to go one better 
and develop an online buying experience 
where we had designed every aspect of 
the store, ensuring the customer really 
absorbed the style and feel of Face and 
its products,” Chris explained. 


© Spaced 


[t] 020 7288 8150 
[w] www.spaced.co.uk 


Spaced.co.uk is a new club concept 
involving both on- and offline 
technology. “As part of a business 
concept that encompasses the unique 
Spaced pods — enabling people to 
create a personalised photocard and 
send it by email to friends from club 
venues — the Spaced Web site needed 
to belong to a strong brand identity,” 
explained Spaced site designer Mark 
Roberts at Digital Arts. Shockwave was 
chosen as the principle design tool for 
the enhanced site due to its ability to 
integrate and control Flash movies 
explicitly, as well as the additional 
interactivity it ultimately affords. “The 
Spaced site attempts to transpose the 
club lifestyle onto the Web, not through 
slow-loading and ultimately irritating 
graphics that poorly replicate club 
imagery, but by capturing the spirit of 
modern youth culture,” says Mark. With 
Director and Flash, the client-side 
elements of the site were designed using 
a combination of Dreamweaver 3, 
Fireworks and Photoshop. 


Copyright (WHS FALE Mata Lid - site design and developnent by Ocmine Systems 
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@ Amaze 


[t] 0151 330 3300 
[w] www.amaze.co.uk 


Some people love the standard Flash 
sites littered with chrome effects and 
spinning logos; others hate them. Finding 
a new way of using Flash technology was 
at the top of list when the Web designers 
at Amaze had to re-build their site. 
“Visually we wanted to simplify and 
flatten the site contents so that every 
area was visible on one plane. From a 
purely visual point of view we took flight 
path maps and radar screens as a 
starting point. The aim was to make 
something that was graceful, avoiding 
chrome gradients and machine noises,” 
explained Tunde Cockshott, creative 
director at Amaze. “Something non- 
aggressive and non-macho was our aim. 
In fact the interface engine is called bi- 
violet, bi for the bi-directional linking 
and Violet after one of the designer’s 
children, who was born during the initial 
design phase.” The software used in the 
design of the site was Flash Generator 
with a SQL server database on Windows 
NT, and for design creation, Flash 4, 
Illustrator, Fireworks and Fontographer. 


Dreamweaver special | 93 | 


arts 


MTV2 


[e] brad@digitl.com 
[w] www.mtv2.co.uk 
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Possibly one of the most talked about 
sites of late has been the new Web site 
from MTV. Having considered feedback 
from users it was clear that a more 
community-based site was needed. “We 
set about bringing together initial 
designs which would create a sense of 
community. At the same time Digit had 
just moved to new studios in Hoxton 
Square, and they were littered with 
furniture which had to be assembled,” 
said Brad Smith from Digit, the site’s 
designers. “It was an exploded diagram of 
a filing cabinet which became the crux of 
the MTV2 site. To us this diagram was an 
abstract representation of what we were 
looking for. In the diagram there were 
‘many elements’ coming together to form 
a ‘whole’ — a community, in essence. But 
not only that, there was a 3D quality 
about the style of illustration which 
created a sense of ‘space’ in which a 
community could exist.” 
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Gameplay 


[t] 0113 2340444 
[w] www.gameplay.com 


%) gameplay 


“Videogames themselves influenced our 
home page design. The initial animation 
reminds the visitor of a console loading 
up and gets the brand prominent for the 
start,” said site designer Guy Cowan. 
“Going deeper into the site we wanted to 
clearly demonstrate our breadth using 
distinct colour themes. Gameplay has 
always been about more than being 
simply an e-tailer; however, this was 
often the misconception created by the 
now defunct Gameplay launch site.” The 
Gameplay site has been designed to 
bring together the e-commerce, online 
gaming and community aspects of the 
company as seamlessly as possible, and 
Macromedia’s products were chosen to 
achieve this. “Like most other Web 
monkeys we are huge Macromedia fans 
here at Gameplay towers. The HTML was 
built in Dreamweaver, the still graphics 
in Fireworks, and the Shockwave 
animations constructed with Flash,” Guy 
explained. 


Communication Views 


Sponch of POAA aeabelks feo 
Toy and Camsieos chars 


Communication 


GEORGE 


Todias Grau Team 
Tobias Grau, Germany 
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€ Chillout 


[w] www.chillout.fm 


“We wouldn't say there were problems 
but it was certainly a challenge to create 


a visual representation for a radio station, 


something that is heard but never seen,” 
explained the designers of the online 
radio station Chillout FM. Phuong Quan 
and Boris Injac from Recognition Media, 
Chillout FM’s designers, used 
Dreamweaver 3 (which according to 
them is the ‘old HTML chestnut’), Flash 
(‘the one and only’ no less), Photoshop 5, 
Illustrator 8and Vecta 3D. “The 
emphasis was to create a relaxing virtual 
environment that engages the listener 
and enables visual interaction, utilising 
advancing Internet technology and 
setting the ground for further creative 
development,” Phuong explained. “One 
of the ways we have done this was by 
creating the ‘Trip-Scope’, where users 
can choose from visual patterns to 
complement the music. And of course no 
chill-out vibe could be achieved without 
the essential chill-out lava lamp!” 
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Viaduct, a London-based interiors 
company, specialising in leading 
contemporary European furniture and 
lighting design, commissioned Deepend 
to create its first Web presence. “The 
brief clearly required a Website that, 
while reflecting the minimalist and 
contemporary style of the company, 
enhanced the accessibility of the 
product range with the object of 
attracting potential and current clients 
into the store,” explained the site 
designer Alex Griffin. A key creative 
criteria of the design was that the 
products were to have visual dominance 
and clarity, providing high quality images 
of the products to maintain the aesthetic 
integrity evident in the designs. 
“Deepend’s creative solution delivers a 
smooth, fluid and sophisticated 
environment that communicates 
Viaduct’s minimalist and contemporary 
style,” Alex concluded. The result is 
certainly impressive. 
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Ted Baker is one of the fashion success 
stories of the Nineties. Some of the 
biggest stars of the decade could be 
seen donning the clothes that became 
synonymous with ‘cool Britannia’. 
Unfortunately though the first Ted Baker 
site was poor; this was put right last year 
with a re-launch. “The inspiration for the 
site was the Ted Baker store. We wanted 
to replicate the unique consumer 
experience of visiting a Ted Baker store 
online,” said designer Giles Routledge 
from Blueberry.Net. “We are trying to 
achieve fun e-commerce functionality 
and a trendy and funky image without 
being snobby and elitist.” The revamped 
Ted Baker site was, according to the 
designers, ‘the first ever Flash e- 
commerce page using Flash 4, Intershop 
4and Generator 2. The design team had 
some problems dealing with the new 
software and trying to adapt to it ina 
short period of time. The solution at the 
end was the old favourite, “Hard work!”. 
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Rockstar Games is the online arm of this 
New York-based games company, 
publisher of games like the controversial 
million-seller GTA2 and skate game 
Thrasher: Skate and Destroy. “The site 
was to be a combination of early Eighties 
kitsch and urban cool. During the initial 
design phase we carried out extensive 
research to ensure that the look and feel 
was exactly right: including looking at 
the opening credits to a large number of 
late Seventies and early Eighties TV 
shows — The Six Million Dollar Manand 
Knight Rider, for example. The imagery 
and graphics used by TV shows of the 
period provided a solid base for the look 
and feel of the Rockstar site,” explained 
Jake Portman, at Web designers, Oyster. 
A suite of Macromedia products were 
used to create the site and designing a 
site that could be easily updated was a 
challenge. “We didn’t want to 
compromise the integrity of the 
designers’ vision,” Jake explained. 
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“The best way for a brand to be built 
online is through word-of-mouth 
marketing, so the site needs plenty of 
excuses for sending things to your 
friends via e-mail and encouraging them 
to visit,” explained Richard Graham at E- 
Marketing — the company behind the 
Fabulous Bakin’ Boys Web site. FreeHand 
8was used for all of the product logos 
and line work, while Flash 3 was 
employed for the games and animations. 
“There was a great need to introduce vast 
swathes of colour, to introduce warmth 
and vibrancy while reinforcing the brand. 
The solution was to overlay these large 
areas of colour, but to create bitemarks 
revealing the screen below.” Trying to 
come up with fresh ideas is becoming 
increasingly hard for designers but 
Richard believes he best is yet to come. 
“The most rewarding sites are yet to be 
designed, but will rely on more than 
purely a big brand name and some 
supplied content. That's the real skill.” 
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Broadband Internet access is about to 
revolutionise the world of Web design 
and content, and new site NOW — the 
Network Of the World — has brought 
telecommunications, computing and 
television technologies together. “The 
inspiration for the site’s look and feelis a 
long story and one shrouded in secrecy. It 
is based on an invented mythology and 
mystery called the ‘origin myth’,” 
explained Dylan Byrne, designer at 
NOW. “This is a story that will evolve and 
become more apparent to the user as 
time goes by. It will also carry a strong 
interactive sub-layer to the everyday 
content, an area where the users will be 
able to involve themselves in unravelling 
the mystery and become part of the 
mystery itself.” To design the site Dylan 
used Flash, Illustrator, 3D MAX R2.5, 
Maya and Photoshop 5.5. “We aim to 
develop the site as a fully-integrated 
broadband multimedia environment,” 
Dylan concluded. EES 
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